<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport"
          content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../Styles/base.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<p align="right" height="0pt" width="0pt">第 19
    章为移动设备和其他设备而设计</p>

<blockquote>
    <font color="#FFFFFF">IVef ffound</font>
</blockquote>
<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</p>

<p align="center" height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="419" src="../Images/Image00370.jpg"
                                                width="364"/></p>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> 19-5 IOS
    <font size="2">上的</font> Procreate
    <font size="2">是一个图像创作类的应用</font> .
    <font size="2">它使用了大量的弹出控制窗格，用户在上面可以配置所选工具
        的属性。这些弹出窗格看起来像是一个矩形的气球，上面的三角凸起则指向和它有关联的对象</font>
</blockquote>
<p>基于方向的布局</p>

<p>和手持设备一样，平板应用也要考虑屏幕的方向，即垂直还是水平。对于平板应用来说，
    单纯的旋转是不够的，屏幕中的标签、导航、工具栏等均需要灵敏地、自然地自我旋转，并找 到合适的方位上，比如从侧边上转到顶边或底边上。水平变垂直时，我们还要为此添加按钮来 调出覆盖式的窗格（参见图 19-4);
    而垂直变水平时，我们还要把覆盖取消并改成相邻。这些
    考虑对于一些简单的应用来说足够了，对于一些较为复杂的应用，或者专注于某种功能而严重 依赖某个访问的应用（例如视频播放器需要水平屏显，电子书阅读器需要垂直屏显，而各种创
    作类工具则要求各种复杂控件的布局必须是固定的）来说，我们可能只需要考虑支持一个方向。 在下面的两个小节中，我们将详细阐述两个例子。</p>

<p>移动布局 VS
    .类桌面布局</p>

<p>现在很多触屏平板的屏幕分辨率已经很高了，虽然只有 10 英寸左右大小的屏幕，但像素已 经足够多了，足以和笔记本电脑或桌面机的屏幕媲美。这诱使我们把平板应用当做桌面应用的
    缩小触屏版来设计。在多数场合下，这个想法是不实际的。但对于媒体浏览、其他类别的搜索 和浏览、查看和网购类的应用来说，本章阐述的方法是适用的。</p>

<p>然而，针对复杂的生产和创作型应用，如果想取代桌面软件，还需要在其中多运用一些类</p>

<blockquote>
    421
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p>似于桌面系统上的工具栏和窗格。尤其是音频和视频编辑软件，似乎更加适合采用一些桌面式
    的交互用法，如图 19-6 所示，在里面我们可以适当运用一些相对密集的控件布局、多个窗格的
    运用、复杂的工具栏和控制面板，甚至较大的弹出面板或抽屉，以及拖放的习惯用法等。</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00314.jpg"/></p>

<p>图19-6
    Steinberg公司的Cubasis和Corel公司的Pinnacle Studio软件，是常见的创作类应用它们的设计采取了类 似于桌面软件的复杂布局。</p>

<p><br/>
    <br/></p>

<blockquote>
    如果你设计的应用属于此类，那么一定要记住如下几个原则：
</blockquote>
<blockquote>
    • 确保工具栏、控制面板、菜单项等要具备一定的面积，使得提示区 （hit area )、元素的 间距足够手指操作。
</blockquote>
<blockquote>
    • 拖放操作在触屏上容易失误，可能会将物体误放至错误的区域。因此，要少用或避免 使用。
</blockquote>
<blockquote>
    • 弹出面板要指向它的来源地，并具备清晰标示的页眉。
</blockquote>
<blockquote>
    • 密切关注功能层级，尽可能将工作流线性化。尽可能地让用户在单个路径中完成任务。
</blockquote>
<blockquote>
    • 具有复杂布局的应用，要定一种屏显模式并坚持之。不要设计成水平和垂直都可以的。
    可将另一种屏显方向用于完全不同的显示场合。
</blockquote>
<blockquote>
    类硬件控件布局
</blockquote>
<p>对于某些应用，特别是音乐创作领域中的软件，模仿硬件的界面会令该领域内的用户非常
    喜欢。如果是在台式机或笔记本电脑的桌面系统中，用鼠标或触控板来操作这种虚拟硬件的界 面是很困难的，但多点触屏的引入彻底改变了这个局面。设计师现在可以考虑用指尖来操作，
    进行水平或垂直的拖动（这和音乐硬件设备上的操作是一致的），也可以进行旋转拖动操作。这 些动作完全模仿了诸如真实世界中混音台上面的滑块和旋钮，使用者用起来会十分得心应手。
    而且，不只是单纯地对原来的硬件进行模仿，设计师还可以更有创意地设计出超越硬件的操作 动作，例如可以用手指直接操作声音的波形图，重塑或抹掉波形等，这将使这极大丰富音乐创</p>

<p>422</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00351.jpg"/></p>

<p>第 19 章为移动设备和其他设备而设计</p>

<p>造活动，使之达到一个新的高度，如图 19-7 所示。</p>

<p><font color="#EBEBEB">1.2:1 -24dB</font></p>

<p height="0pt" width="0pt"><font size="5"># # #</font></p>

<p><i><font color="#EBEBEB">02</font></i> <font size="1"><font
        color="#EBEBEB">0.2</font></font></p>

<p><font color="#EBEBEB">泛一]|~00七泠</font> <font color="#EBEBEB">Q22I</font>
    <font color="#EBEBEB">vs; M ’</font></p>

<p><font size="2"><font color="#EBEBEB">BCVLAB L ■: __J , POST e</font></font>
    <font color="#EBEBEB">〇</font></p>

<p><font size="1"><font color="#EBEBEB">&nbsp; DYNAMICS</font></font> <font
        size="1"><font color="#EBEBEB">^STEREO-IMG</font></font> <font size="1"><font
        color="#EBEBEB"><s>—</s></font></font> <font size="1"><font color="#EBEBEB">一__♦ MAXIMI2ER</font></font></p>

<p><font size="2">图</font> 19-7 <font size="2">图为</font> iPad <font size="2">上正在运行的</font> <font
        size="4">Positive Grid</font> <font size="2">的</font>
    Final Touch. <font size="2">是专业级的音频制作软件。它使用了大量的硬件控制隐喻，
        布局和工作流的设计十分巧妙，其创新设计的直接操作习惯用法和模仿硬件的控制，使得</font> Rnal
    Touch <font size="2">十分强大、无比易用</font></p>

<p><span id="filepos0002199669"></span></p>

<p>小平板应用</p>

<p>小平板也是一种受大家喜欢的移动设备，例如谷歌的 Nexus 7 或亚马逊的 Kindle Hre
    等。 它们的价格相对便宜，可顺利地放入衣服兜或随身携带的小包中，因此也十分流行。不过，从 用户体验的角度来看，它们通常也是 16
        : 9 的屏显，支持水平和垂直两种方位，较小的屏幕尺 寸给触屏体验设计师带来了挑战。和全尺寸的平板相比，小平板的手指操控空间有限。另一方
    面，智能手机上的应用直接拿过来运行，美学上又显得不足，特别是操作系统自带的标准控件 更是如此。</p>

<p>手持设备和全尺寸平板上的导航和布局策略，运用在小平板上基本上没有问题。但要注意 以下几点：</p>

<p align="right" height="6pt" width="0pt">• 多个相邻的窗格 —— 这是全尺寸平板在垂直屏显时都要特别慎重考虑的，在小平板上
    更要避免。多个相邻的窗格对于小平板来说，太拥挤了。在水平屏显时，最多只能用</p>

<p>423</p>

<p><br/></p>

<blockquote>
    两个相邻窗格（或者再加上一个垂直标签栏 （tab bar ))。但在垂直屏显时，一定不要
    使用多个相邻的窗格，有需要时可以运用覆盖式的弹出窗格或抽屉。关于抽屉，我们 在下一节中讨论。
</blockquote>
<blockquote>
    • 工具栏 —— <font
        color="#000000">我们要注意工具栏在平板上摆放的位置。由于小平板比手机要大不少，在 垂直屏显模式下，屏幕还会变得又窄又高，因此将工具栏放在顶端对于手指操作来说
    显得有点远。在水平模式下，顶端的工具栏和导航栏放在一起，则会占用掉一些已经 十分有限的垂直空间。所以，对于小平板来说，工具栏最好垂直地放在侧边，这是个 最为合理的位置。关于平板上的工具栏，我们在下一节中会详细讨论。</font>
</blockquote>
<blockquote>
    • 列表 —— <font
        color="#000000">单列的列表在小平板上会显得过于单薄，即使垂直屏显时也是如此。网格、 泳道、卡片等才是平板上列出内容的最佳方式，无论水平还是垂直屏显都适用。如果
    内容本身就是列表形式的，可以考虑在垂直屏显上使用垂直标签或工具栏，在水平屏 显上相邻地摆放索引窗格和细节窗格。在下一节，我们会详细介绍这些习惯用法。</font>
</blockquote>
<blockquote>
    • 弹出对话框 vs
    全屏对话框 —— 一些在手持设备上可以使用的全屏习惯用法（例如针
    对菜单或对话框的一些习惯用法 ) ，在屏幕较大的小平板上是不可以使用的；这些习惯
    用法在全尺寸平板上应该被设计成弹出对话框。我们也可以运用弹出控制窗格来展示 工具栏，但它会占据掉大部分的屏幕空间。
</blockquote>
<p><font size="6">关于移动导航、内容、控制的习惯用法</font></p>

<p>移动应用中，运用了大量的桌面和 Web 应用的习惯用法，我们在第 21
    章中会谈到。除此 之外，移动设备的多点触屏技术及其有限的屏幕尺寸，也令它产生出一系列专属于移动应用的 独特的习惯用法。</p>

<p>本节中，我们将详细阐述几种最常用、最重要的专属于移动应用的习惯用法。</p>

<p><span id="filepos0002205321"></span></p>

<p>浏览控件</p>

<p>绝大多数的移动应用都是针对浏览需求的。无论是听音乐、看视频，还是刷新社交软件、查看
    餐厅点评，抑或是阅读电子邮件、网络购物、搜索内容等，我们在移动设备上进行着大量的阅读、 浏览、观看、查看等动作。受制于外形大小和输入手段，在移动设备上浏览和选择内容，比直接输
    入内容要方便得多。基于此，在移动应用中，用于浏览内容的丰富模式就被开发出来了。</p>

<p>列表</p>

<p>列表（ list),
    是手持触屏设备上最常用的一种组织内容的方式。列表内容的常见形式有：</p>

<p>424</p>

<p align="right" height="0pt" width="0pt">第 19
    章为移动设备和其他设备而设计</p>

<p>一行一行的项目、一段一段文本 、一 排一排的控件（如复选框、按钮）及其标签 、图片 或视频 的缩略图等。</p>

<p>轻点列表中的某个条目，就会进入到内容层级结构的下一级，或者展现该条目的内容，或
    者进入到下一级分组结构中。有时轻点列表条目会调出一个模态的弹出对象或屏幕，用于呈现 操控该条目的各种选项，或者进入条目的细节展示页面。</p>

<p><img align="baseline" alt="" height="74" src="../Images/Image00290.jpg"
        width="93"/></p>

<p><img align="baseline" alt="" height="93" src="../Images/Image00086.jpg"
        width="215"/></p>

<p><img align="baseline" alt="" height="188" src="../Images/Image00119.jpg"
        width="91"/></p>

<p><img align="baseline" alt="" height="96" src="../Images/Image00165.jpg"
        width="234"/></p>

<p>一会儿我们还将讨论，列表通常会和标签栏 （tab
    bar) 在一起，为用户提供多屏内容的访 问，每个标签调出的屏幕都会对应一个独立的列表。苹果 iOS 上的 “ 音乐 ” 应用 （music APP)
    就运用了这种方式，在界面的底端有一个标签栏，包含专辑、表演者、歌曲等标签，每个标签
    对应一个列表，每个列表有自己的内容层级结构（图 19-8 )。</p>

<p><font size="1">••〇〇〇</font> <font
        size="4">AT&amp;T 1:15</font> <font size="1">AM
    Y</font> | 99% <font size="1"><i>wm</i></font> Store <font size="2">Albums</font></p>

<p height="3pt" width="0pt"><font size="5">A</font></p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="74" src="../Images/Image00290.jpg"
                                                width="93"/></p>

<p>Abbey Road</p>

<p>The Beatles</p>

<p>17 songs, 47 min</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="93" src="../Images/Image00086.jpg"
                                                width="215"/></p>

<p>Actually</p>

<p>Pet Shop Boys</p>

<p>2 songs, 9 min</p>

<p>r</p>

<p>Agada</p>

<p>Flying Bulgar Klezmer.</p>

<p>13 songs. 58 min</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="96" src="../Images/Image00165.jpg"
                                                width="234"/></p>

<p>Radi«,i Albums Artiats <font
        size="1">Songs</font></p>

<p><font size="2">图</font> 19-8 iOS <font size="2">中的音乐应用界面的下方有一个标签栏，它包含了专辑、表演者、歌曲等标签。每个标签都对应一个列表。</font>
</p>

<p>列表长度可以是有限的，也可以是无限的，即允许无限滚动 （infinite scrolling )。无限滚
    动用于列出大量的数据（例如网页搜索结果），用户每次滚动到列表底端，列表就会继续列出 更多的结果。这种无限滚动的方式，对于有限的硬件计算能力来说，是一种必要的妥协。不
    过，不得不说，这是一个优美的方法，不过前提是列出新内容的等待时间要足够短，建议一定 要小于 1 秒。</p>

<blockquote>
    425
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p>网格</p>

<p>网格（ grid)
    将诸如应用的图标、缩略图、功能图标等内容组织成规则的行列形式。最明 显的一个例子就是 iPhone
    的主画面 （home screen) ，它是展不应用图标的编辑
    N 格。安卓有类 似的界面。微软也借用了这个概念，同时将其融合到更具创新的 “ 开始 ” （ Start) 屏幕网格，它
    将应用和通知混合在一起，却又不失美感和实用性，如图 19-9 所示。</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00281.jpg"/></p>

<p>图19-9 iOS和安卓的主画面很相近，都运用了网格，这是从Palm
    Pilot那里学来的。微软则另辟蹊径，研发出了自己独 特的Zune界面，将其集成到Metro U丨中，界面中独特的“开始”屏幕网格无缝地、漂亮地将应用和通知混合在一起。</p>

<p><br/>
    <br/></p>

<p>而在应用中，网格视图（也称为画廊视图）通常被用来展示媒体内容，例如照片、视频、
    音乐专辑（带有精美封面的），或是包含了图像、文本、按钮、链接元素的小尺寸的封装卡 (encapsulated card ，后面会详细介绍）。在用网格来展示内容对象时，我们要确保用户知道该如 何导航。 iPhone
    的主画面用水平滑动在不同的网格 “ 页面 ” 间导航。将网格作为导航和选择的 主要方式的大多数应用，例如 Rdio 软件（参见图 19-10)
    ，以无页面方式，有时以无限的、垂 直的滚动浏览的方式来显示更多的网格对象（本例中对象是专辑 )
    。在 Rdio 中，屏幕底端的专
    辑图标只能部分显示出来，这样便很好地暗示出滚动的方向，用户看到这个视觉提示便会明白， 此时该用垂直滑动来列出更多的专辑。</p>

<p>苹果 iPhone
    的 “ 照片 ” 应用，如图 19-11
    所示，在其 “ 相机胶卷 ”（Camera Roll )的视图 中，采用了更为紧密的 4 列网格。</p>

<p>网格也可以水平滚动，如苹果 iPhone 中的 “ 音乐 ” 应用，当它旋转成水平屏显时，就可以
    横向滚动了，如图 19-12 所示。</p>

<p>426<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 19
    章为移动设备和其他设备而设计</p>

<blockquote>
    <font size="1">•〇〇〇〇</font> AT&amp;T ^ « 4：31 PM
    -f <font size="2"><i>4</i></font> <font size="1">■〇</font>
</blockquote>

<blockquote>
    <img align="baseline" alt="" height="113" src="../Images/Image00109.jpg" width="275"/>
</blockquote>
<blockquote>
    <img align="baseline" alt="" height="116" src="../Images/Image00147.jpg" width="277"/>
</blockquote>
<blockquote>
    <img align="baseline" alt="" height="86" src="../Images/Image00149.jpg" width="330"/>
</blockquote>
<blockquote>
    Heavy Rotation
</blockquote>
<p align="center" height="9pt" width="0pt"><img align="baseline" alt="" height="113" src="../Images/Image00109.jpg"
                                                width="275"/></p>

<p>Frozen (Original... The New Classic
    (...</p>

<p>Various Artists Iggy
    Azalea</p>

<p>32 <font size="1">娜齡</font> I5stvng$ EXPLicrr</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="116" src="../Images/Image00147.jpg"
                                                width="277"/></p>

<p>Honest Nothing Was The..
</p>

<p>Future Drake</p>

<p>18 s&gt;ongs EXPuciT H songs
    Exfucn*</p>

<blockquote>
    图19-10 Rdio是一个音乐流应用，它运用了两列滚动网格来展示音乐专辑。屏幕最下面的那一列专辑图标被遮掉了一
    部分，这意味着要垂直滚动。
</blockquote>

<blockquote>
    •oopo AT&amp;T 4：34 PM <font size="1">彳</font> «Z&gt;
</blockquote>

<blockquote>
    <img align="baseline" alt="" height="462" src="../Images/Image00060.jpg" width="339"/>
</blockquote>

<blockquote>
    &lt; Albums Camera Ro <font size="2">丨丨</font> _!_t <font
        size="2">图</font> 19-11 <font
        size="2">苹果</font> iPhone <font
        size="2">照片应用中的</font> Camera
    Roll <font size="2">，运用了较密的</font> 4 <font size="2">列垂直滚动网格。</font>
</blockquote>

<blockquote>
    427
</blockquote>
<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00341.jpg"/></p>

<p>图19-12当iPhone的音乐应用的界面旋转成水平屏显时，网格滚动也变成水平的。轻点某个专辑图标，用户便进入到
</p>

<p>查看该专辑具体内容的界面，内容包括：专辑封面、垂直滚动显示的歌曲列表，以及传输控制等.
</p>

<p><br/>
    <br/></p>

<p>用张合手势 （pinch
    gesture) 来缩放网格，这个想法看起来很好很诱人，但通常并非如此， 特别是当手机处于窄窄的垂直屏显模式时。因为这会造成严重的可读性问题，图标和缩略图的
    点击区域的大小也成了问题，此外文本标签和元数据的列宽度也无法保证。</p>

<p>和列表一样，轻点网格中的内容项，会将用户带入到下一级内容，展现出另一个网格、内
    容列表或控件列表等。也可能会调出一个模态弹出界面，将该条目的选项展示出来。或者是打 开关于该条目的细节内容视图，如图 19-12 所示。</p>

<p>此外，网格也可以进行有限或无限的滚动，在滚动时，更多的条目列或条目行会从网格末 端出来。
</p>

<p>内容轮显</p>

<p>屏幕轮显使用水平滑动手势 （swipe
    gesture) 以全屏布局的方式在不同内容间导航。相对于与 屏幕轮显，内容轮显是存于单一屏幕布局之内的。但同样使用了水平滑动手势，这样可以在固
    定的全屏布局内，展现并导航不同的内容对象。内容轮显适用的常见内容有媒体缩略图（或较 大的图片），有时也用于浏览包含了媒体和格式化文本的卡片或文本。</p>

<p>内容轮显所展示的内容，要有适当的尺寸和间距，这样它们从屏幕边缘流入到屏幕中间时，
    才会显得自然。有时它们也会在宽度上填满整个屏幕，并在左边或右边设置一个箭头，或者在 下方加上一个页标 （page marker) 小部件。有些轮显，例如 iPad 的
    App Store ( 应用商店）上</p>

<p>428</p>

<p align="right" height="0pt" width="0pt">第 19
    章为移动设备和其他设备而设计</p>

<p>方的那个轮显，采用了 3D 效果的显示，这样会将聚焦的对象在轮显中置于其他对象的前面， 并凸显出来。</p>

<p>设计得当的轮显可以从头到尾循环展示，而不需要用户到了末端还要一路滑动回到最开始
    的位置。我们还要注意，当轮显到达末尾时，得给用户以清晰的视觉提示。</p>

<p>一般来说，内容轮显适合用来展示一组数量不是太多的对象，由于我们希望对象在展示时
    能突出出来，所以一个屏幕上只能使用一个轮显，并且其位置在整个布局中要显著。 iPhone 上
    的 Crackle 软件就是一个极佳的例子，如图 19-13 中的左图所示，该应用的界面上有一个很大的
    轮显，位于特色标签栏（位于图中底部）的上方。它还设置了一个页标小部件，这样用户便可 时刻知晓当前处于哪一页。（要注意：页标这一 “ 小花招 ” ，仅适合条目不多的轮显。）它还会每
    过几秒钟自动滑动轮显 —— 这是轮显习惯用法的一个常见变体。这可以让用户了解并学会该行
    为，也更具动态，并确保用户可以看到应用想突出展示的东西。要注意，自动滑动轮显的速度不 要太快，否则用户来不及阅读上面的内容。当用户在操作屏幕上的其他元素时，自动滑动要停下 来，以避免方位紊乱的情况。</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00213.jpg"/></p>

<p><font size="4">图19-13左图是iPhone的Crackle应用.它是一个内容轮显的极佳例子。（红五星标签选中时的那个轮显。）它运转
    得很好该屏幕中间右侧有一个箭头，它告诉用户还可以继续深入查看更多细节内容，不过这个箭头容易让人混淆，因 为它看起来也像是滚动轮显的一个操作符号，右图是iPhone上的Safari浏览器，它是_个垂直的轮显。中图是iPad的
    AppStore应用.使用了</font> 3D效果的轮显，</p>

<p><br/>
    <br/></p>

<p>垂直轮显使用得较少。苹果 iPhone 的 iOS7 上的 Safari 浏览器，在浏览标签页上釆取了这
    种用法。用户可以上下滑动，进行浏览并轻点选择，还可以向左滑动删除该标签页（图 19-13 里面的右图）。
</p>

<blockquote>
    429
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p>泳道</p>

<p>泳道是一种很聪明的格子轮显方法，很好地平衡了轮显的自然浏览频率与信息密度。泳道
    (swimlane) 是一组垂直排列的轮显，每个轮显都可以独立水平滚动，对其他轮显没有影响。导
    航到其他泳道也很简单，只要垂直滚动就可以了。作为一种浏览多种类型内容的方法，泳道是 很巧妙的，其导航也很简便。在某个内容类型的泳道中使用滑动手势，就可以浏览里面的内容，
    而其他的泳道原地不动。它比网格式的浏览要简便，后者要实现这样的功能，所有的列和行都 要问时移动。</p>

<p>在 Netflix
    应用中，大量运用了泳道来浏览按类型分类的内容。用户垂直滑动可以变换不同 类型，水平滑动可以查看某一个类型的具体内容。即使是水平屏显模式中的内容的视口 (viewport)
    比较窄，泳道仍然可以给用户以较好的使用体验，如图 19-14 所示。苹果的 AppStore 在其 “
    精选 ” 标签页中，同时使用了轮显和一组泳道。这种组合的效果也不错，因为此时的导
    航手势对于屏幕上所有的元素是一样的。</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00007.jpg"/></p>

<p align="right" height="0pt" width="0pt">图19-14
    Netflix应用将泳道作为它最主要的浏览手段。苹果AppStore上的精选页面中，则同时运用了轮显和一组泳道,,</p>

<p><br/>
    <br/></p>

<p>目前来说，很少有设计师将泳道设计成到达末尾可自动返回到起点的。但他们应该这样设
    计，可以在泳道的起点和末尾打上记号，这样用户便有了视觉反馈，指示他们到达末尾时可以 回到列表的起点。虽然目前泳道被用来展示有限的条目，但你可以想象一下，它完全可以用来</p>

<p>430<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 19
    章为移动设备和其他设备而设计</p>

<p>展示无限数量的条目（想象一下，按类别列出搜索结果就是一种无限数量的条目）。不过，泳道
    和轮显不同 —— 泳道千万不要设定为自动滚动。</p>

<p>卡片</p>

<p>卡片（ cards)
    是一种移动设备上的新型习惯用法。不过，它的早期雏形可能是 Mac 上面的 HyperCarcT 。早期
    Mac 的屏幕分辨率较低（比现在智能手机要低得多），为迎合低分辨率的显
    示器，设计者将图片和文本信息整齐地结合在一起，用于信息和内容的展示和浏览等。 HyperCard 最初的目标用户群是有创作需求的大众，但最后变成了一个程序员们创建和编辑富媒体和内容</p>

<p align="right" height="0pt" width="0pt">交互的工具。</p>

<p>时代飞速发展，现在智能手机已经普及，但原始的需求没有变化：如何才能在一块小小的
    屏幕上有效地展示出容易让用户阅读和吸收的富媒体信息呢？此外，现在的手机在本质上还是 一个社交和移动通信的工具，这进一步放大了这个需求。而满足这个需求的，是现代卡片式的 U1
    。卡片，作为一种新型的手机交互习惯用法，是一个自我封装的交互对象，里面包含了媒体、 文本、网页链接、社交动作（例如点评、分享、打标签、添加媒体等 ) 。 Facebook
    和 Linkedln 在其手机应用中，就把卡片作为核心的习惯用法，如图
    19-15 所示。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00066.jpg"/></p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font
        size="2">图</font> 19-15 Facebook
    <font size="2">和</font> Linkedln
    <font size="2">应用将卡片作为核心习惯用法</font> „</p>

<p><br/>
    <br/></p>

<p align="right" height="2em" width="0pt">①译注 ••
    HyperCard 是一款 Apple
    Mac 的应用程序，最初发布于 1987
    年并于 2004 年停止使用 。HyperCard 是最成功的超媒体应用程序之一。它用于创建数据库、演示文稿、游戏、教具等。</p>

<blockquote>
    431
</blockquote>
<p><img align="baseline" alt="" height="117" src="../Images/Image00152.jpg"
        width="75"/></p>

<p>About Face 4 :交互设计精髓</p>

<p>谷歌的搜索应用中的 Google
    Now 运用了一种不同于卡片的方式。它更加专注于情境信息 ( <font
        color="#000000">时间、地点，以及从其他谷歌应用中摘取来的信息等），而不太专注于社会交互。谷歌的卡片 实际上封装了来自其他谷歌服务的数据，例如天气、地图、股票、餐厅点评、日历和电子邮件
    的通知等。轻点这些内容，会将用户带到产生这些信息的应用中，它实际上提供了一个深入交 互的场所（图</font> 19-16) 。谷歌的卡片还可进行个性化设置，点击卡片的右上角就可访问，访问时 卡片翻转过来，将设置界面展现给用户。
</p>

<p>Stocks today</p>

<p>&lt;y6/2Ol4.4:30PMEOT</p>

<p><font size="1"><i>TSLA</i></font> <font
        size="2">206.90</font> 2,91
    1.43%</p>

<p>GOOG <font size="2">553.90</font> 9.24 1.70%</p>

<p>DJI 16836.11 98.58 0.59%
</p>

<p><font size="1">aapl</font> <font
        size="2">647.35</font> 2.53 0 <font size="1">.</font> 39 <font
        size="1">%</font></p>

<p><font size="1">mrk</font> <font
        size="4">58.10</font> 0.17 0 <font
        size="1">.</font> 29 <font size="1">%</font></p>

<p><font size="2">Lightning to USB Cable (1</font>
</p>

<p>m)</p>

<p>dipped - Tuesday. May27 4：n
    PM</p>

<p><font size="1">1</font> <font
        size="4">item from: Estimated a</font></p>

<p><font size="1">Muitd^v,</font> <i>Ju</i></p>

<p><font size="1">arrival：</font></p>

<p>◎ Track all packages S View
    email</p>

<p>Indian Masterpieces To Be Featured At
    Bonhams New York</p>

<p>Bonhams Auctiooeors
    Press <font size="1">Raimses - 20 hour^</font> <font
        size="4">36</font> <font size="1">min •.</font>
    MexAk/9 fo webs/te you <i>f^ccntfy
        rtsit^d</i> Logitech Ultrathin for iPad Air (2014)</p>

<p>TabteT PC R«v»«w -17
    hotra. <font size="1">SI nvoutes ago.</font></p>

<p><font size="1">〇</font> IPad</p>

<p>43 minutes to work</p>

<p><font size="2">Male Celebs Become Terrifying When Given
    Zooey Deschanel's Baby Blues</font> 10 minutes <font size="2">to new</font></p>

<p><font size="2">place</font></p>

<p>Walnut St</p>

<p><i>e</i></p>

<p><font size="2">图</font> 19-16 <font size="2">谷歌的搜索应用中的卡片封装了</font> <font
        size="2">一些和用户当前情境有关的有用信息片断，例如位置、时间，以及来自其他 谷歌服务中的相关信息。</font></p>

<p>卡片最常见的组织形式是列表，但它们也会以网格、轮显和泳道的形式出现。 Facebook 的 Paper
    应用，以一种非标准的方式来组织卡片：屏幕的上半部分是一个类别卡，它循环展示单 个海报。轻点一下海报，海报就会扩展成一个全屏的卡片，如图 19-17 所示。在类别卡下面，</p>

<p>432</p>

<p><br/></p>

<p align="right" height="0pt" width="0pt">第 19
    章为移动设备和其他设备而设计</p>

<p>是一个无限循环的滚动泳道。在泳道里展示的是许多卡片式海报，在此向上滑动，则泳道被扩
    大至全屏，更多的信息被展示出来。（此时向下滑动，则可将泳道复原到屏幕下方。）点击任何 一个卡片，都将把用户带到卡片所示内容的来源地。</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00163.jpg"/></p>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> 19-17 <font
        size="2">在</font> Facebook <font
        size="2">的</font> Paper <font
        size="2">应用中运用了卡片，而卡片的组织则采用了非列表的方式。它的交互体验很不错。内
    容导航由屏幕上方的类别卡片轮显来完成（每个类别卡片会自动移动，并循环播放），下方则是该类别的具体内容，用 户可以通过无限式的卡片泳道来浏览。</font>
</blockquote>
<p><span id="filepos0002245791"></span></p>

<p>导航和工具栏</p>

<blockquote>
    “ 栏 ” （ bar) 是手持移动应用中用来导航不同功能和内容区域的一种主要机制。与列表和网
</blockquote>
<p><img align="baseline" alt="" height="58" src="../Images/Image00144.jpg"
        width="249"/></p>

<p><img align="baseline" alt="" height="143" src="../Images/Image00309.jpg"
        width="29"/></p>

<p><img align="baseline" alt="" height="103" src="../Images/Image00297.jpg"
        width="224"/></p>

<p><img align="baseline" alt="" height="401" src="../Images/Image00016.jpg"
        width="249"/></p>

<p><img align="baseline" alt="" height="13" src="../Images/Image00105.jpg"
        width="118"/></p>

<p>About Face 4 :交互设计精髓</p>

<p>格一样，栏很早就出现在了早期的移动触屏设备上。栏，通常是位于屏幕顶端或底端的水平窄
    区域，栏里面是一系列类似于标签或者按钮的控件，这些控件有时是图标形式的，有时是文本 形式的（有时两者都有，很多 i 〇 S 应用就是如此)。这些控件的外观设计要十分醒要让用
    户很容易地识别其功能是什么。要做到这一点不太容易，因此很多主流的操作系统幵始转向扁 平的视觉风格。尽管扁平化这一做法降低了视觉上的混乱，但不幸的是，用户要花费更多的认
    知努力，才能辨别出活动的控件。在这一点上，大多数用户在长时间的使用过程中，已经“被 训练 ” 得十分老练了，看到带有文本或图标的条状物时，他们一眼就能看出来这可能是一个导
    航控制栏之类的东西。</p>

<blockquote>
    标签栏
</blockquote>
<p>标签栏 （tab bar),
    包含一系列的文本或图标按钮。（在 iOS 的标签栏中，经常使用图标，
    并在图标下方加上对应的文本）。轻点标签栏上的标签按钮，会将主内容区域切换成一个新的列 表或网格视图，这样的使用效果和桌面系统界面上的标签是差不多的。标签栏中的每个标签都
    保持着各自的内容层级关系，并用列表和网格展现出来，同时它还会保持当前运行应用的层级 状态。标签栏一般出现在 i 〇 S 屏幕的下方，在安卓和
    Windows 系统上则出现在屏幕的上方，如 图 19-18
    所示。</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="58" src="../Images/Image00144.jpg"
                                                width="249"/></p>

<p><font size="1">Andre Yunta G…</font></p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="103" src="../Images/Image00297.jpg"
                                                width="224"/></p>

<p>a it 〇
    ^ =</p>

<p height="0pt" width="0pt"><font size="5">UM</font></p>

<p><font size="6"><i>M</i></font> <font
        size="4">Tom Perham</font></p>

<blockquote>
    0 <font size="1">〇</font> <font
        size="4">i</font> <font size="1">〇</font> <font
        size="4">9 wich PM</font>
</blockquote>
<blockquote>
    • must rtmembtf to ufce p imtMdofpicnic.
</blockquote>
<p><font size="5"><font color="#FFFFFF">wall</font></font></p>

<p>J Tom Perham <font size="5">P</font></p>

<p>IV« <font size="1">9〇(麝</font> spji# ttdoH forihr gig who wanes
    l <font size="1">〇</font> c <font size="1">〇</font> mt&gt;</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="13" src="../Images/Image00105.jpg"
                                                width="118"/></p>

<p>国 Tom
    Perham |3</p>

<blockquote>
    y 義 .
</blockquote>

<p align="center" height="0pt" width="0pt">® (5) ©</p>

<p><font size="2">图</font> 19-18 iOS <font size="2">、安卓</font> <font
        size="4">、Windows Phone</font> <font size="2">上的标签栏。</font> iOS <font size="2">的标签栏通常在屏幕的底端，而安卓的标签栏通常会在导航
    栏下方形成一个新的二级导航（安卓的术语是</font> “ <font size="2">动作栏</font> ”——action bar)，Windows Phone <font size="2">则使用纯文本作为标签栏，
    并没有常见的矩形的样子。</font></p>

<p>有些平板应用使用了垂直方位的标签栏，通常位于屏幕的左侧。 Spotify 和 Twitter
    的 iOS 平板应用中，则运用了标签栏的变体，如图 19-19 所示。
</p>

<p>434</p>

<p><br/></p>

<p align="right" height="0pt" width="0pt">第 19
    章为移动设备和其他设备而设计</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00101.jpg"/></p>

<p><font size="2">图</font> 19-19 Spotify <font size="2">和</font> Twitter <font size="2">在其平板应用上使用了垂直的标签栏。这种设计得益于平板设备在垂直方向上有足够的空</font>
</p>

<p>__ iip</p>

<p height="8pt" width="0pt"><font size="5">HP</font></p>

<p>PPP0</p>

<p>1 ■ i B1</p>

<p height="0pt" width="0pt"><font size="5">PS#</font></p>

<p><font size="2">间。标签上同时使用了图标和文本，便于用户识别</font> <font
        size="4">.</font> <font size="2">这样的效果很好</font> <font
        size="4">t</font></p>

<p>“ 更多…”控件</p>

<p>大多数手机的屏幕都是窄长的形状，再考虑到手指尖接触时的面积因素，通常我们建议一
    个标签栏中的项目数量不要超过 5 个。如果超过 5 个，则要考虑用别的方式来处理。这一点， i
    〇 S 和安卓都有其各自的办法。</p>

<p>“ 更多
    …” （ more...)
    控件，如图 19-20 所示，是标签栏或动作栏上的一个控件，它解决了
    手机屏幕面积有限的问题。 iOS 上，该控件通常是一个标签，它可以将用户带到下一个屏幕，
    或者显示更多的导航选项。它通常还可以进入到编辑模式，用户在编辑模式下，可以从当前屏 幕上拖过来一个选项，放到栏上，拖过来的这个新选项会交换栏上的原选项，并占据原选项的 位置。在安卓上， “ 更多 …”
    控件通常会出现在动作栏的右侧（参见本章中的有关导航栏和动作 栏的一节），点击它会弹出一个附加的导航选项菜单，或（更常见的是）功能菜单。有些 iOS 应用，例如 iPhone
    上的 Rdio 音乐流应用，在屏幕右上角使用了一个类似的习惯用法，轻点它
    会弹出一个全屏的模态界面，里面会呈现出更多的选项。</p>

<p>标签轮显</p>

<p>标签轮显 （tab
    carousel) 同样可以解决 “ 更多 …” 控件要解决的问题，它是水平滑动轮显
    和标签栏的完美联姻。标签轮显中的标签看起来和标签栏中的标签没有什么两样，但它们可以 被滑动到屏幕的外面。选中的标签会被置于中心的位置，或者被高亮标注出来。轻点哪个标签 ,
    哪个标签就被选中。用手指轻滑一下标签栏，就选中了和它相邻的左侧或右侧的下一个标签， 并将被选中的标签所控制的内容展现在主区域里，如图 19-21 所示。</p>

<p align="right" height="4em" width="0pt">435</p>

<p><img align="baseline" alt="" height="48" src="../Images/Image00317.jpg"
        width="228"/></p>

<p><img align="baseline" alt="" height="13" src="../Images/Image00192.jpg"
        width="221"/></p>

<p><img align="baseline" alt="" height="100" src="../Images/Image00331.jpg"
        width="194"/></p>

<p><img align="baseline" alt="" height="32" src="../Images/Image00074.jpg"
        width="115"/></p>

<p><img align="baseline" alt="" height="173" src="../Images/Image00249.jpg"
        width="233"/></p>

<p><img align="baseline" alt="" height="37" src="../Images/Image00186.jpg"
        width="226"/></p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="48" src="../Images/Image00317.jpg"
                                                width="228"/></p>

<p><font size="1">雜</font> Genius 4^ Compilations <font size="1">一</font> <font
        size="4">，-Composers</font></p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="13" src="../Images/Image00192.jpg"
                                                width="221"/></p>

<p align="center" height="0pt" width="0pt"><font size="1">Stations</font></p>

<p><font size="1">Ybu«</font></p>

<blockquote>
    <font size="1">丄</font> - Genres Playlists
</blockquote>

<p>认 Si 辨</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="100" src="../Images/Image00331.jpg"
                                                width="194"/></p>

<p>S3</p>

<p><font size="1">A ftMion iM4o^t»w«Tw&amp;k
    m</font></p>

<p>ko f <font size="1">〇</font> uc h«a <font size="1">〇</font> ry «nd UO* y <font
        size="1">〇</font> ur Cottecfcon
</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="173" src="../Images/Image00249.jpg"
                                                width="233"/></p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p height="0pt" width="0pt"><font size="5">X&nbsp;</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <blockquote>
                <font size="2"><font color="#FFFFFF">&nbsp;</font></font> <font size="2"><font color="#FFFFFF">Your
                Stations</font></font>
            </blockquote>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p height="0pt" width="0pt"><font size="5">V&nbsp;</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <blockquote>
                <font size="2"><font color="#FFFFFF">&nbsp;</font></font> <font size="2"><font
                    color="#FFFFFF">People</font></font>
            </blockquote>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <blockquote>
                <font size="2"><font color="#FFFFFF">&nbsp;</font></font> <font size="2"><font color="#FFFFFF">Alternative</font></font>
            </blockquote>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <blockquote>
                <font size="1"><font color="#FFFFFF">&nbsp;</font></font> <font size="1"><font
                    color="#FFFFFF">Blues</font></font>
            </blockquote>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <blockquote>
                <font size="2"><font color="#FFFFFF">&nbsp;</font></font> <font size="2"><font color="#FFFFFF">Christian/Gospel</font></font>
            </blockquote>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <blockquote>
                <font size="2"><font color="#FFFFFF">&nbsp;</font></font> <font size="2"><font
                    color="#FFFFFF">Classical</font></font>
            </blockquote>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <blockquote>
                <font size="2"><font color="#FFFFFF">&nbsp;</font></font> <font size="2"><font
                    color="#FFFFFF">Country</font></font>
            </blockquote>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <blockquote>
                <font size="2"><font color="#FFFFFF">&nbsp;</font></font> <font size="2"><font
                    color="#FFFFFF">Dance</font></font>
            </blockquote>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>
</table>

<p><br/>
    <br/></p>

<p><font size="2">图</font> 19-20 <font size="2">在</font> iOS <font size="2">的音乐应用里，有一个叫作</font> <font
        size="4">“More...”</font> <font size="2">的控件（译者注：中文版</font> iOS <font size="2">上叫作</font> “ <font
        size="2">更多</font> ” <font size="2">控件），见左图</font> Rdio <font
        size="2">应用中也有类似的</font> “…”
    <font size="2">控件，点击它会调出一个模态弹出界面，可以选择音乐电台的风格。</font></p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#000" colspan="2" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p><font color="#FFFFFF">&nbsp;</font> <font
                    color="#FFFFFF">*〇〇〇〇</font> <font size="2"><font color="#FFFFFF">AT&amp;T •?* 4:48 PM</font></font>
                <i><font color="#FFFFFF">，</font></i></p>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p><font color="#FFFFFF">&nbsp;</font> <font size="2"><font
                    color="#FFFFFF">'■</font></font> <font color="#FFFFFF">■〇</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <blockquote>
                <font color="#FFFFFF">&nbsp;</font> <font color="#FFFFFF">三</font>
            </blockquote>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p height="0pt" width="0pt"><font size="5">YOUR MUSIC&nbsp;</font></p>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p><font color="#FFFFFF">&nbsp;</font> <font
                    size="4"><font color="#FFFFFF">Edit</font></font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" colspan="3" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p height="0pt" width="0pt"><font size="5">PLAYLISTS SONGS ALBUMS&nbsp;</font>
            </p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <blockquote>
                <font color="#FFFFFF">&nbsp;</font> <font size="2"><i><font color="#FFFFFF">f</font></i></font>
                <font size="2"><font color="#FFFFFF">Syncing 2 of 2</font></font>

            </blockquote>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <blockquote>
                <font size="6"><font color="#FFFFFF">&nbsp;</font></font> <font size="6"><font
                    color="#FFFFFF">★</font></font>
            </blockquote>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p><font color="#FFFFFF">Starred</font></p>

            <p><font size="2"><font color="#FFFFFF">&nbsp;</font></font> <font
                    size="2"><font color="#FFFFFF">12 tracks</font></font></p>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <blockquote>
                <font size="2"><font color="#FFFFFF">&nbsp;</font></font> <font size="2"><font
                    color="#FFFFFF">&gt;</font></font>
            </blockquote>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <blockquote>
                <font size="6"><font color="#FFFFFF">&nbsp;</font></font> <font size="6"><font
                    color="#FFFFFF">0</font></font>
            </blockquote>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p><font color="#FFFFFF">Local Files</font></p>

            <p><font size="2"><font color="#FFFFFF">&nbsp;</font></font> <font
                    size="2"><font color="#FFFFFF">0 tracks</font></font></p>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <blockquote>
                <font size="2"><font color="#FFFFFF">&nbsp;</font></font> <font size="2"><font
                    color="#FFFFFF">&gt;</font></font>
            </blockquote>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p><font color="#FFFFFF">New</font></p>

            <p><font size="2"><font color="#FFFFFF">&nbsp;</font></font> <font
                    size="2"><font color="#FFFFFF">1 track</font></font></p>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <blockquote>
                <font size="2"><font color="#FFFFFF">&nbsp;</font></font> <font size="2"><font
                    color="#FFFFFF">&gt;</font></font>
            </blockquote>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p><font color="#FFFFFF">&nbsp;</font> <font
                    color="#FFFFFF">Schoolboy Q</font> <font size="2"><font color="#FFFFFF">-</font></font> <font
                    size="4"><font color="#FFFFFF">Oxymoro</font></font> <font color="#FFFFFF">by Islam Elsedoudi • 15
                tracks</font></p>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p><font size="2"><font color="#FFFFFF">&nbsp;</font></font> <font
                    size="2"><font color="#FFFFFF">…&gt;</font></font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <blockquote>
                <font size="6"><font color="#FFFFFF">&nbsp;</font></font> <font size="6"><font
                    color="#FFFFFF">rE3</font></font>
            </blockquote>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p><font color="#FFFFFF">Dinner</font></p>

            <p><font size="2"><font color="#FFFFFF">® 24 tracks</font></font></p>

            <p><font color="#FFFFFF">&nbsp;</font> <font
                    size="4"><font color="#FFFFFF">Playlist 2</font></font></p>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <blockquote>
                <font size="2"><font color="#FFFFFF">&gt;</font></font>
            </blockquote>

            <blockquote>
                <font size="2"><font color="#FFFFFF">&nbsp;</font></font> <font size="2"><font
                    color="#FFFFFF">&gt;</font></font>
            </blockquote>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" colspan="2" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <blockquote>
                <font size="2"><font color="#FFFFFF">Lotus Flower</font></font>

            </blockquote>
            <blockquote>
                <font size="2"><font color="#FFFFFF">&nbsp;</font></font> <font size="2"><font color="#FFFFFF">RacJiohead</font></font>

            </blockquote>
        </td>

        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span>

            <p><font color="#FFFFFF">&nbsp;</font> <font
                    size="4"><font color="#FFFFFF">④</font></font></p>
        </td>
    </tr>
</table>

<p><br/>
    <br/></p>

<p><font size="2">图</font> 19-21 iPhone <font size="2">上的</font> Spotify <font size="2">应用在</font> <font
        size="4">“Your Music”</font> <font size="2">视图中采用了标签轮显，该标签轮显可以从主导航抽屉里调出。</font>
</p>

<p><br/></p>

<p align="right" height="0pt" width="0pt">第 19 章为移动设备和其他设备而设计</p>

<p>和其他类型的轮显视图一样，当它出现在用户面前时，我们至少要让一个标签看起来是部分
    地处于边缘外的状态，这样用户便明白这个标签是可以滚动的 。Windows Phone 在它的应用中使
    用了标签栏轮显的一个变体。标签栏并没有以矩形条的形式出现，而是纯文本（参见图 19-18 )。</p>

<p>导航栏和动作栏</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00179.jpg"/></p>

<p>导航栏 （nav bar),
    位于屏幕顶端，为列表或网格视图提供导航，如图 19-22 所示。通常来
    说，导航栏的左边都一个回退按钮，中间是当前列表、网格或其他形式视图的标题。安卓则将 这些控件称之为 “ 动作栏 ” （ actionbar) 。多数情况下，功能菜单或按钮会放在右边。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00179.jpg"/></p>

<p><font size="2">图</font> <font size="6">19-22</font> <font size="2">各种手机操作系统中的导航栏一左：</font> <font
        size="6">iOS</font> <font size="2">。中：安卓。右：</font>
    <font size="6">Windows</font> <font size="2">。安卓的动作栏经常出现在屏幕顶端，
        提供导航和功能访问等。安卓和</font> <font size="6">Windows</font> <font size="2">的屏幕底端还使用了系统自带的导航栏。</font> <font size="6">Windows</font>
    <font size="2">则运用了所谓的</font> <font size="6">Metro</font>
    <font size="2">设 计，通常不在顶端放置导航栏。</font></p>

<p>•woo AT&amp;T <i>^</i></p>

<p>&lt; Back Visual Destgn *
    <font size="2">々。</font> (J|</p>

<p><font size="2">Q</font> ―丨如阳</p>

<blockquote>
    Q .photos f'^] .^references Jypefaces „updated figures .Deliveries 1. interior
    visual style O 2
    - W|p
</blockquote>
<blockquote>
    3. figures
</blockquote>
<blockquote>
    1 ☆
</blockquote>
<blockquote>
    <i>fmti</i>
</blockquote>
<p>多数的安卓版本（以及 Windows
    Phone 8.1) 在屏幕底端都有系统自带的导航栏。它包含了 一个回退控件（ back)( 可将用户带回到刚刚访问过的应用界面，或回退到层级结构的上一级）， 主画面控件（ home) 和一个 “
    最近访问 ” 的控件（ recents )。这个系统自带的导航栏始终都占 据着屏幕的底端，因此应用只能将属于自己的导航栏放到屏幕的顶端。
</p>

<p>工具栏和工具板</p>

<p align="right" height="3pt" width="0pt">工具栏（ toolbar)
    包含了针对当前应用或应用内所选内容的操控功能 。Windows Phone 的 动作栏位于屏幕底端，设计师可以在动作栏（也称为应用栏 ——APPbar) 上放置 4 个动作按钮。</p>

<p>iOS 应用经常会把一个或者两个动作按钮放在导航栏的右侧，对于浏览和查看类的应用来
</p>

<p align="right" height="1em" width="0pt">437<br/>
    <br/></p>

<p>About Face 4 :交互设计精髓</p>

<p>说，这样很好。不过，创作类的应用在创作和编辑的界面上，通常会在底端放置一个工具栏，
    将底端原来的标准标签栏替换掉。</p>

<p>谷歌的安卓则趋向于在顶端放置一个动作栏，它将回退导航和动作按钮结合在一起。我们
    推荐在其下方设置一个标签栏，这在用户需要访问多个视图时会非常有用。谷歌的动作栏还支 持下拉，这样如果需要加上更多的动作但标签栏上的位置又不够时就可以把额外的动作放到下 拉的视图里。</p>

<p>多数音频播放器应用则会在 “
    正在播放 ” 屏幕的底部放置一个传输栏（
    transportbar )或控 制窗格，用于放置一些和 “ 回放 ” 有关的控件。</p>

<p>工具板 （tool
    palette) 是工具栏的变体，移动设备上的这个东西和它的桌面 “ 表亲”（参见 第 18 章）的用法是类似的，它上面包含了一些图标按钮，用于访问和操作被查看和编辑的对象。
    ( 绘图和图像处理软件等，是使用工具板的最典型的应用软件。）平板应用中的工具板，大量地
    使用了弹出控制面板，提供了一系列的工具和配置。</p>

<p>垂直的工具栏和工具板</p>

<p>在平板上，有一些支持弹出控制面板的更为复杂的工具栏，会同时出现在平板的顶端和底
    端。同时，在左边或者右边（有时两边都有）还会有额外的垂直工具栏 （vertical tool bar )。图
</p>

<p>19- 23 所示的是
    Art Studio 应用，它大量运用了复杂且丰富的工具栏。</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00298.jpg"/></p>

<p><font size="4">图19-23
    ArtStudio应用中使用了垂直工具栏.在屏幕顶端还使用了类似于桌面系统的菜单栏.在底端则放置一个滑块 控件。诸如Art Studio的各种创作类软件都开始在平板上大显身手.试图达到可以媲美复杂的桌面应用的程度这样一
    来，平板应用的界面上很快就会充斥着大量的控件，变得杂乱不堪为避免这种情况.Art Studio应用在用户操作时可 以将这些控件隐藏起来，这一点很像一些桌面应用，例如Adobe Photoshop。</font></p>

<p><br/>
    <br/></p>

<p>438</p>

<p align="right" height="0pt" width="0pt">第 19
    章为移动设备和其他设备而设计</p>

<p>工具轮显</p>

<p>和各种轮显类的习惯用法一样，工具栏和轮显杂交的后代叫作工具轮显 （tool camursel )。 它令有限的屏幕可以容纳下更多的功能，用户通过滑动手势便可以跨越屏幕轻松访问大量的功
    能。工具轮显在图像处理应用中运用得最多，例如谷歌的 Snapseed ，如图
    19-24 所示。该工具轮 显中的每个功能都是一个带有文本标签的缩略图，该缩略图描述了当前的滤镜或特效，以及施加
    在样图上的效果。（更为理想的是，缩略图是正在编辑的图像，但现实问题是手机屏幕不够大。）</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00211.jpg"/></p>

<p><font size="2">图19-24谷歌的Snapseed软件采用了轮显方式，用户可以滑动轮显找到想要的工具。工具一旦被选中，该工具的控
    件就会被显示出来，有些工具还会调出二级轮显，让用户继续选择属性等.</font></p>

<p><br/>
    <br/></p>

<p>我们将两个栏堆叠起来，可以化繁为简，将复杂的功能简单化。用户可以在堆叠的两个栏
    中的工具栏里选取所需的工具（特效、滤镜或改变值的大小），而在工具轮显中显示某个类别下 的每个具体的工具或其变体。</p>

<p>菜单栏：移动设备上应避免使用的习惯用法</p>

<p align="right" height="6pt" width="0pt">在创作类工具软件从桌面走进平板的同时，一些桌面应用的陷阱也走进了平板中。 i 〇 S 上 的 Art Studio ( 参见图 19-23)
    和 Cubasis (
    图 19-6) 等应用，釆用了类似桌面的复杂控制布局。</p>

<p>Art Studio 走得更远，它干脆把桌面上常用的菜单栏拿了过来。
</p>

<p>这个做法很糟糕，原因有几个。首先，当用户看到一行文本标签时，第一反应是“这是个</p>

<p>标签栏 ” <font
        color="#000000">，根本不会想到菜单栏会出现在平板上。其次，很多功能被隐藏在菜单里，它们一旦展 现出来，单从菜单标签看，很难看出来它们的功能到底是什么。最后，同时运用工具栏和工具
    轮显，完全可以替代菜单栏的绝大部分功能，并且还具有视觉密度小、易于理解的优点。</font></p>

<p><span id="filepos0002289881"></span></p>

<p>抽屉</p>

<p>抽屉（ drawer)
    是一种巧妙的习惯用法，用户可以通过抽屉来访问一个包含了导航元素的 垂直列表，这些导航元素实际上有点类似于标签（ tab )。抽屉把一个面板层隐藏在主内容区域 之下，因此只需要占用极少的屏幕面积。抽屉图标，有时也被称为
    “ 汉堡包菜单图标”。之所以 被称为汉堡包，是因为其图标是三个堆叠的横杠，形状类似汉堡包。轻点抽屉图标，或者在有
    些应用中水平滑动主内容区，主内容区下面的抽屉便被抽了出来。和标签栏一样，被选中的项 目会被高亮突出。再点一下抽屉中的项目，项目的具体内容就会显示在主内容区，同时抽屉也 会 “ 啪 ”
    的一下收回关上。抽屉内的项目通常都是文本的，有时也有图标和其他装饰物。一些 额外的控件，可能也会出现在抽屉里。 iPhone
    中的谷歌 Gmail 应用，如图
    19-25 所示，就使用 了抽屉这种习惯用法。</p>

<table valign="top">
    <tr valign="top">
        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span> &nbsp;

            <blockquote>
                <font size="2"><font color="#FFFFFF">的</font></font> <font size="2"><font color="#FFFFFF">rmreimann
                ,</font></font> <font size="2"><font color="#FFFFFF">-</font></font> <i><font
                    color="#FFFFFF">o</font></i>
            </blockquote>

            <blockquote>
                <font size="2"><font color="#FFFFFF">Primary</font></font>

            </blockquote>
            <p align="right" height="0pt" width="0pt"><font size="1"><font color="#FFFFFF">99+</font></font></p>

            <blockquote>
                <font size="2"><font color="#FFFFFF">Social</font></font>

            </blockquote>
            <p align="right" height="0pt" width="0pt"><font size="1"><font color="#FFFFFF">11 new</font></font>
            </p>

            <blockquote>
                <font size="2"><font color="#FFFFFF">^ Promotions</font></font>
            </blockquote>

            <p align="right" height="0pt" width="0pt"><font size="1"><font color="#FFFFFF">99+ new</font></font>
            </p>

            <blockquote>
                <font size="2"><font color="#FFFFFF">Labels</font></font>
            </blockquote>
            <blockquote>
                <font size="2"><font color="#FFFFFF">Important</font></font>
            </blockquote>

            <p align="right" height="0pt" width="0pt"><font size="1"><font color="#FFFFFF">99+</font></font></p>

            <blockquote>
                <font size="2"><font color="#FFFFFF">Starred</font></font>
            </blockquote>
            <blockquote>
                <font size="2"><font color="#FFFFFF">Sent Mail</font></font>
            </blockquote>
            <blockquote>
                <font size="2"><font color="#FFFFFF">Drafts</font></font>
            </blockquote>

            <p align="right" height="0pt" width="0pt"><font size="1"><font color="#FFFFFF">99+</font></font></p>

            <blockquote>
                <font size="2"><font color="#FFFFFF">Spam</font></font>
            </blockquote>
        </td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>
</table>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图19-25 iPhone中的Gmail应用使用了抽屉，该抽屉里包含了一些额外的导航控件元素。账户管理界面的控件和设置界 面的控件</font>
    . <font size="2">在抽屉里是挨着的」但账户管理界面是从上至下滑出的，而设置界面是从下至上滑出的，这有点令人不舒服。</font>
</blockquote>
<p>440</p>

<p align="right" height="0pt" width="0pt">第 19
    章为移动设备和其他设备而设计</p>

<p>次要动作抽屉</p>

<p>抽屉可取代导航标签栏，也可与应用中的次要对象交互。抽屉通常从屏幕左侧滑动打幵，
    但有时不是这样。有些次要对象或次要动作被放置在了右侧的抽屉里。例如， iPhone 上的
    Facebook 应用，常用的主要动作是按照一般的标准被放置在底端的标签栏，用于主要的导航工
    作，同时在右侧可以滑出一个抽屉，在此用户可以访问所有在线的朋友，并同他们聊天，如图 19-26 所示。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="100" src="../Images/Image00295.jpg"
                                                width="305"/></p>

<p><br/>
    <br/></p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</p>

<p align="center" height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="298" src="../Images/Image00084.jpg"
                                                width="53"/></p>

<p><br/>
    <br/></p>

<p><font size="2">图</font> 19-26 iPhone <font size="2">上的</font> Facebook <font size="2">应用，采用了右侧抽屉，可以在此选取在线朋友并聊天</font>
</p>

<p>双抽屉</p>

<p>Path 是
    iOS 上的一款基于时间线的社交软件。它很受大家欢迎，原因之一是 Path 成功地将 标签栏和工具栏最小化，从而释放出宝贵的屏幕不动产。 Path 的界面，如图 19-27 所示，釆用
    了两个抽屉：一个是标准的从左侧滑出的抽屉，用于不同视图间的主要导航；另一个是类似
    f Facebook 的右侧抽屉，用于在朋友间收发信息。它还使用了一个非标准但很有意思的工具菜单
    控件，用户可以从屏幕左下角将其调出。对于用户来说，虽然要先点一次才能调出该工具菜单 , 但这个 “ 点一下 ” 的交互过程非常清晰，而且很好玩 ——
    执行时，内容区域会闪烁。</p>

<p align="right" height="2em" width="0pt">441</p>

<p><img align="baseline" alt="" height="431" src="../Images/Image00347.jpg"
        width="242"/></p>

<p><img align="baseline" alt="" height="160" src="../Images/Image00001.jpg"
        width="243"/></p>

<p><img align="baseline" alt="" height="49" src="../Images/Image00358.jpg"
        width="195"/></p>

<p><img align="baseline" alt="" height="432" src="../Images/Image00371.jpg"
        width="244"/></p>

<p><img align="baseline" alt="" height="206" src="../Images/Image00287.jpg"
        width="224"/></p>

<p>About Face 4 :交互设计精髓</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="431" src="../Images/Image00347.jpg"
                                                width="242"/></p>

<p>二</p>

<p>00 ®</p>

<blockquote>
    <font size="2">图</font> 19-27 iPhone
    <font size="2">上的</font> Path <font
        size="2">软件同时提供了两个抽屉，左抽屉用于主要导航，右抽屉用于收发信息此外，在左下角</font>
</blockquote>
<blockquote>
    <font size="2">还有一个非标准的弹出式的工具菜单</font> . <font size="2">单击一下左下角，它便呈扇形弹出。</font>
</blockquote>
<blockquote>
    条目级抽屉
</blockquote>
<p>有些手持设备上的应用，将滑出抽屉的概念运用到了列表中的单个条目。在列表中，滑动单个
    条目（向左或向右）后，会将条目底下的工具栏展现出来，里面包含着针对该条目的一些操作 动作。这样，屏幕顶端或底端的工具栏就没有必要存在了。这个方法看似巧妙，但它有几点不足 :</p>

<p>• 在缺乏视觉提示的情况下，用户难以察觉此功能。但如果加上视觉提示，则会占用宝
    贵的水平空间。桌面应用则可以用鼠标悬停在条目上方出现提示，也不会搞乱屏幕布 局，但移动应用不具备此功能。</p>

<p>• 抽屉滑过来时，条目被滑走了或者被模糊了，这使得用户必须要记住该条目是什么，
    这增加了记忆负担。</p>

<p>• 每个条目都可以水平滑动，这意味着其他类似的水平滑动操作可能就没有办法再使用
    了，例如滑动删除或打开全局的导航抽屉等，即便可以使用，可能也会搞懵用户。</p>

<p>iPhone 上的
    Slacker 软件，如图 19-28
    所示，提供了一个条目级抽屉的可行用法，可以同时 应用到列表和网格条目上。在网格条目上向左滑动，就会出现艺术家、电台、专辑等信息：在 列表条目上滑动就会出现一个带有
    “Info” 按钮的抽屉。轻点它会将用户带到详细的元数据信 息界面。这个设计很巧妙，降低了
    UI 混乱 （UI clutter),
    但可发现性（ discoverability) 较差，
    因为在网格的条目上滑动并不是一个标准的交互用法。所以，我们应该为这类交互增加一些解 释和说明，放在 “ 欢迎 ” 界面或帮助界面里。不过，即便如此，大部分用户是否能够摸索到这
</p>

<p>442</p>

<p><br/></p>

<p>第 19 章为移动设备和其他设备而设计</p>

<p><br/></p>

<p><img align="baseline" alt="" height="497" src="../Images/Image00177.jpg"
        width="306"/></p>

<p>一功能也是个未知数。</p>

<table valign="top">
    <tr valign="top">
        <td bgcolor="#000" valign="top">
            <span bgcolor="#000000">&nbsp;</span> &nbsp;<p><font color="#FFFFFF">AT&amp;T</font> <font
                size="1"><font color="#FFFFFF">9 12:04 AM</font></font></p>

            <p align="right" height="0pt" width="0pt"><font color="#FFFFFF">：-.-f</font> <font
                    size="2"><font color="#FFFFFF">：</font></font></p>

            <p><font color="#FFFFFF">:</font> <font
                    size="2"><font color="#FFFFFF">93</font></font> <font color="#FFFFFF">%
                an-</font></p>

            <p><font color="#FFFFFF">&lt;</font></p>

            <p align="right" height="0pt" width="0pt"><font color="#FFFFFF">(•) Ultimate
                Collection</font></p>

            <p height="0pt" width="0pt"><font size="5">P</font></p>
            <blockquote>
                <font size="5"><font color="#FFFFFF">t&gt; m a</font></font>
            </blockquote>
            <p><font color="#FFFFFF">0</font></p>
            <p><font color="#FFFFFF">1,</font> <font
                    size="2"><font color="#FFFFFF">I've Got a Life</font></font></p>

            <p><font size="1"><font color="#FFFFFF">by Eurythmics</font></font>
            </p>
            <p><font size="2"><font color="#FFFFFF">2. Love Is a
                Stranger</font></font></p>

            <p><font size="1"><font color="#FFFFFF">by Eurythmics</font></font>
            </p>
            <p><font size="2"><font color="#FFFFFF">3. Sweet Dreams (Are Made of
                This)</font></font></p>

            <p><font size="1"><font color="#FFFFFF">by Eurytnmics</font></font>
            </p>

            <blockquote>
                <font size="2"><font color="#FFFFFF">①</font></font>
            </blockquote>
            <p><font size="2"><font color="#FFFFFF">4. Who*s That
                Girl?</font></font></p>

            <p><font size="1"><font color="#FFFFFF">fey Eurythmics</font></font>
            </p>
            <p><font color="#FFFFFF">S,</font> <font
                    size="2"><font color="#FFFFFF">Right</font></font> <font
                    color="#FFFFFF">by</font> <font size="2"><font color="#FFFFFF">Your Side</font></font> <font
                    color="#FFFFFF">by Eurythmics</font></p>
            <p><font size="2"><font color="#FFFFFF">6« Here Comes the Rain
                Again</font></font></p>
            <p><font color="#FFFFFF">SB</font> <font
                    size="2"><font color="#FFFFFF">Eurythmics</font></font></p>

            <p><font color="#FFFFFF">H</font> <font
                    size="1"><font color="#FFFFFF">^Mis^ionasy</font></font></p>
            <p height="0pt" width="0pt"><font size="5">II</font></p></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" colspan="2" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" colspan="4" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" colspan="2" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" colspan="3" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" colspan="2" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>

        <td bgcolor="#000" valign="top"><span bgcolor="#000000">&nbsp;&nbsp;</span></td>
    </tr>
</table>

<p><br/>
    <br/></p>

<p><font size="2">图</font> 19-28 Slaker <font size="2">流音乐软件在网格条目和列表条目上都采用了条目级抽屉，用户可以滑动条目查看更加详细的信息。</font>
</p>

<p><font size="2">尽管这个设计在降低</font> UI <font size="2">混乱方面做得很出色，但它的可发现性较差。</font></p>

<p>要避免的抽屉行为</p>

<p>我们要注意，访问选项时，不要过度运用动画式屏幕转换，例如弹出窗格、滑动窗格等。
    Gmail 应用里的抽屉，如图 19-25 所示，就是一个过度运用动画式屏幕转换的反例教训。</p>

<p>当用户点击抽屉图标时，或者是将内容窗格向右滑动时， Gmail 的主抽屉便会打幵，整个 过程很自如，没有任何问题。此时，抽屉内的导航选项（也就是电子邮件的各种文件夹）便上
    下延展，呈现出来。</p>

<p>抽屉打开之后，情况开始复杂起来。抽屉顶端的动作栏里有一个账号管理功能，它是一个 切换控件（
    toggle) 。将它激活，一个窗格会下滑出来，遮住抽屉里的内容。选择账号后，或者
    是取消该账号窗格，则账号窗格会消失，抽屉里的内容才会再次露出来。这个账号管理的切换 控件，还有一个设置按钮，点击该按钮，会从屏幕底部滑出另一个窗格。这个窗格也会遮住抽
    屉，还会盖住主内容区域。听起来就够乱的吧？是的，确实很乱。</p>

<p>这就是我们要避免的一种情况。不要过度使用弹出窗格和滑动窗格——尤其是每个窗格从
    不同方向出来，对很多层界面都有影响，这会让人困惑和不舒服。</p>

<blockquote>
    443
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p><img align="baseline" alt="" height="70" src="../Images/Image00259.jpg"
        width="54"/></p>

<p>设计原则</p>

<blockquote>
    要限制动画式屏幕转换的次数和出现的方向。
</blockquote>
<blockquote>
    与谷歌的 Gmai 丨应用不同，
    iOS 上的 Google+
    应用，如图 19-29 所示，打破了抽屉的设计惯
</blockquote>
<p><img align="baseline" alt="" height="558" src="../Images/Image00082.jpg"
        width="321"/></p>

<p>例。该抽屉打开时，直接在上方覆盖住了主内容区，它并没有像普通抽屉一样，将主内容区推
    向右侧屏幕外。通常，垂直屏显平板上的内容索引窗格，经常会采用这种抽屉。这一点让人很 费解，同样是谷歌的产品，为什么会出现两种不一样的抽屉，按道理说，谷歌应该坚持使用 Gmail
    上的那种更加合理的抽屉。</p>

<blockquote>
    <font size="2">图</font> 19-29
    Google+ <font size="2">应用别出心裁，它将抽屉直接覆盖在主区域上面，并没有把主区域推开至右侧。</font>
</blockquote>
<blockquote>
    关于抽屉的争议话题
</blockquote>
<p>使用了汉堡包菜单的抽屉，饱受争议。反对者认为，抽屉将功能隐藏起来，妨碍了使用。
    行业中，甚至还有一些更加极端的反对者，干脆认为应该放弃使用抽屉。我们认为，不应该因 噎废食，不过，反对者的观点也不是完全没有道理：将整个导航层级关系隐藏在某个图标按钮
    后面，这种做法的确是有问题的。我们可以采取一些补救措施，例如用文本按钮（例如用“菜 单 ” 这两个字）来取代汉堡包图标。另外，我们还可以将抽屉的初始状态设置为打幵，让用户
</p>

<p>444<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 19
    章为移动设备和其他设备而设计</p>

<p>看到抽屉，或者在首次使用时弹出 “ 首次使用帮助或提示 ” 的覆盖层气球（参见本章后面的有 关 “ 欢迎和帮助界面 ” 的讨论）。在很多情况下，汉堡包的样式可能才是最大的问题——如果用
    户根本就没有把汉堡包图标当做控件的经历或印象，那么无疑是视觉信息传递的失败。</p>

<p>抽屉的好处在于，它保持了主界面的干净整洁，腾出更多的空间来展示和操作内容。它的
    操作也很简单，一次滑动、或轻拍一下就可以了，用户马上就能学会，而且马上就可以调出来 很多功能和操作。这一点对于具有复杂功能的应用来说，帮助非凡，不亚于天赐之物。</p>

<p>对于用户要经常使用很多功能的应用，抽屉很有帮助，并运转自如。有些应用的功能不太
    常用、但偶尔必须要用一下，在这种场合下，抽屉依然很有帮助。不过，如果应用本身很少被 用到，则最好不要使用抽屉，还是用标签栏作为导航比较好，因为如果用户很少使用某个应用， 通常用户也想不起来里面还有一个隐藏的抽屉。
</p>

<p><span id="filepos0002323189"></span></p>

<p>轻拍显示及其他直接操作</p>

<p>触屏移动应用和桌面应用的最大区别之一，是触屏上可以用手指直接操作屏幕上的对象。
    一些触屏上的构件及其特有的操作方式，例如列表、轮显、抽屉等，可以让用户更喜欢这样导 航方式。不仅是导航和浏览，诸如创建和编辑等工作，也可以充分利用触屏直接操作的特点。</p>

<p>轻拍显示控件</p>

<p>图 19-30
    展示的 iDraw 应用是一个轻拍显示（
    tap-to-reveal) 用法的典范：轻拍一个对象，</p>

<p>操控工具便显示出来。</p>

<p align="right" height="7pt" width="0pt">同样，视频流应用也大量运用了轻拍显示这一习惯用法，在播放视频时，轻拍屏幕可以调出一
    些隐藏的功能。图 19-31 是 YouTube
    应用，在播放区域轻拍一下，传输、音量等控件便显示出来。</p>

<p>直接操作控件</p>

<p>有些应用让直接操作进一步挖掘了触屏的潜力。比如，有些应用将传统的诸如滑块等非直
    接操作，变成了手势直接操作。谷歌的 Snapseed 图像编辑器，是将直接操作发挥到极致的应用
    之一。在提供手势直接操作的同时，它还将直接操作的效果实时地展现在被编辑的图像上。例 如，在 Snapseed 里的 Tilt-Shift ( 移轴）效果，操作时先轻拍图片的某个位置，一个中心调整点
    会出现在轻拍的位置，还会出现一组双线，指示着效果的角度和过渡间隔 （transition interval) ( 如图 19-32 所示）。用户可以移动效果中心点，水平滑动就可以将过渡区域加宽或缩窄，还会
    出现一个类似于温度计一样的度量尺（如图 19-32 下方中间所示)，食指和拇指扭动旋转便会调
    整效果的角度。虽然用户需要探索和尝试并花点时间学习，但这些直接操作很容易上手，很快 就会变成很自然的动作，而且它们提供了强大的、浸入式的照片编辑和修正功能。</p>

<blockquote>
    445
</blockquote>
<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00245.jpg"/></p>

<p>About Face 4 :交互设计精髓</p>

<p><font size="1"><font color="#EBEBEB">Move Tool Untrtled</font></font>
</p>

<p><font color="#EBEBEB">&lt;_ A x</font> <font color="#EBEBEB">夕</font>
    <font color="#EBEBEB">①夕</font> <font color="#EBEBEB">O</font> <font color="#EBEBEB">窃</font></p>

<p><br/></p>

<p>――</p>

<p><br/></p>

<p align="center" height="0pt" width="0pt">■ • 1</p>

<p><br/></p>

<p height="0pt" width="0pt"><font size="5">L J</font></p>

<p><br/></p>

<p align="center" height="0pt" width="0pt">Title</p>

<p><br/></p>

<p align="center" height="0pt" width="0pt">noncirt</p>

<p><br/></p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>
</table>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> 19-30 iDraw
    <font size="2">应用使用传统桌面式的拖动控制柄，轻拍一下某个对象，它的四周就会出现拖动控制柄。在添加选择 模式</font> <font
        size="4">（additive selection mode)</font> <font size="2">时，继续轻拍其他对象，会将所有轻拍的对象视作为一组。</font>
</blockquote>
<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00051.jpg"/></p>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> 19-31
    YouTube <font size="2">在播放视频时，轻拍一下视频区域，传输、音量、其他控件的图标等就会叠映在视频区域上。这种
    设计令屏幕很干净，但必须要让用户能摸索出来此功能。幸运的是，大多数的视频播放器都使用了这种交互方式，所以 这对大多数用户来说，已经是很熟悉的了。</font>
</blockquote>
<p>446<br/>
    <br/></p>

<p>第 19 章为移动设备和其他设备而设计</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00100.jpg"/></p>

<p><font size="4">图19-32
    Snapseed提供了创新的、高度浸入的直接操作的编辑工具.完全不需要一组一组的旋钮和滑块等老式交互 方式。这种创新的代价是，用户要经历了一个陡峭的探索曲线才能学会，但这个劣势将很快被Snapseed所提供的强大、
    易用的操控所弥补.而且在欢迎界面、首次使用、帮助界面等的指导下，用户也用不了太多时间就可以上手。</font></p>

<p><span id="filepos0002360237"></span></p>

<p>搜索、排序、筛选</p>

<p>搜索是移动应用上的一个主要功能，甚至有些人认为，搜索是仅次于打电话的最常用的手
    机功能。人们用手机应用来查找一些东西，例如电子邮件、歌曲、视频、商品或者是现实世界 中身边的东西等。</p>

<p>前面提到过，过于复杂的东西并不适合放在一天到晚都在持续移动的移动应用上。幸运的
    是，我们可以用各种各样的方法来降低搜索的工作量，移动设备还给我们以丰富的情境信息。</p>

<p>隐式排序 VS. 显式搜索</p>

<p>前面讨论过，大体来说，移动应用最常用、最适合做的事情是浏览。运用这种浏览的行为，
    应用按照用户需求，预先将搜索结果准备好。聪明的应用会跟踪用户浏览过的、喜欢做的、或 过去购买过的东西，来推荐用户可能会需要的东西（我们后面还会详细讨论这点），推荐的东西
    和以往的东西有着类似的属性、满足用户类似的喜好和风格。 Netflix 应用就是这样设计的（参</p>

<blockquote>
    447
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p>见图 19-14)
    ，它按照用户以往的观看电影和电视剧的习惯，在不同类别的泳道中推荐新的节目 给用户。当然，搜索这个功能，依然存在于界面上，但不在显著的位置上。</p>

<blockquote>
    构建搜索需求
</blockquote>
<p>当然，即便在浏览中，应用可以将最精确的、用户想要的内容呈现出来，用户仍然不可避
    免地要搜索一些具体的东西。这时，移动应用的使用情境成为了挑战，在保证搜索条件充分的 情况下，我们还要尽量将数据输入的工作量降至最低。下面是几种常见的办法：</p>

<blockquote>
    • 语音搜索 （voice
    search) 三大手机操作系统均支持应用内的（ in-app) 语音搜索，
</blockquote>
<blockquote>
    你当然也希望在你开发的应用具备这个功能。语音搜索显然简化了输入过程，特别是 一些它所支持的领域。然而，语音搜索技术目前还不完善，我们还有相当长的路要走。
    所以，在今天，我们仍然需要手工输入并修改搜索条件。
</blockquote>
<blockquote>
    • 自动填充（ auto-complete)—— 当用户开始敲击字母输入文本时，应用自动补充出一
    些常用的词汇。这种方法极大降低了工作量，减少了一些键盘输入的痛苦。
</blockquote>
<blockquote>
    •
</blockquote>
<blockquote>
    <img align="baseline" alt="" height="18" src="../Images/Image00299.jpg" width="274"/>
</blockquote>
<blockquote>
    <img align="baseline" alt="" height="31" src="../Images/Image00336.jpg" width="71"/>
</blockquote>
<blockquote>
    <img align="baseline" alt="" height="58" src="../Images/Image00122.jpg" width="277"/>
</blockquote>
<blockquote>
    <img align="baseline" alt="" height="248" src="../Images/Image00014.jpg" width="284"/>
</blockquote>
<blockquote>
    预加载（ tap-ahead)——“ 预加载
    ” 进一步细化了自动填充，它指的是应用在用户单
    击前预先为用户推荐一系列词语，并把它们加载到搜索框中。当然，预加载的推荐词语， 可能不是用户想要的。但对于网页搜索和专业领域搜索，这种技术提供了更精确的词条，
    这一点具有重要的意义。谷歌搜索应用，采用了这种预加载的技术，如图 19-33 所示。
</blockquote>
<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="18" src="../Images/Image00299.jpg"
                                                width="274"/></p>

<p><font size="2">冬</font> Cancel</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="58" src="../Images/Image00122.jpg"
                                                width="277"/></p>

<p>^ remind me to... <font
        size="2">氏</font></p>

<p><font size="2">〇</font> View all history</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</p>

<p>cooper tires</p>

<blockquote>
    <font size="2">cooper lighting</font>
</blockquote>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">coopervision</font>
</blockquote>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">cooper manning</font>
</blockquote>

<p height="0pt" width="0pt"><font size="5">R</font></p>

<p><font size="2">Q W E R T Y U 1</font></p>

<p><font size="2">I〇P</font></p>

<p align="right" height="0pt" width="0pt"><font size="2">A S D F G H J</font></p>

<p height="0pt" width="0pt"><font size="5">K L</font></p>

<p align="right" height="0pt" width="0pt"><font size="2">Z X C V B N</font></p>

<p height="0pt" width="0pt"><font size="5">M</font></p>

<p><font size="2">123</font> <i>Q</i> <font size="2">space</font></p>

<p>图 <font size="6">19-33</font> 谷歌搜索引擎运用了语音搜索、最近和频繁搜索建议（左图）、自动填充（右图）、预加载（两图均有&gt;。
</p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>
</table>

<p><br/></p>

<p align="right" height="0pt" width="0pt">第 19
    章为移动设备和其他设备而设计</p>

<blockquote>
    • 最近 / 频繁搜索建议 —— 人们喜欢反复搜索同样的东西。任何搜索功能都应该记住用户
    曾经搜索过的东西，并在用户触动搜索框时将它们呈现出来。理想状态下，这些搜索 结果应该按照最常用和最近的条件排列出来。最好还能同时运用 “
    预加载 ” 搜索，这
    样便于用户进行相关条件和内容的搜索，就像谷歌搜索那样。
</blockquote>
<blockquote>
    • 自动推荐一 • <font
        color="#000000">比自动填充更加智能的是自动推荐，它采用了模糊匹配技术，综合考虑 自动拼写更正、受控词汇表、同义词匹配等因素。通常来说，在自动推荐显示的结果
    中，上方是一小组严格按照自动填充建议出来的搜索项，下方是一大组推荐的搜索项。</font>
</blockquote>
<blockquote>
    • 分类推荐 —— 在自动推荐的基础上，应用还可以使用分类推荐。搜索框会按照类别显 示出推荐的搜索项。 i 〇 S 的 Spotlight 搜索，如图 19-34 所示，就是一个极佳的例子。
    当用户刚开始输入几个字的时候，它便立即按照分类显示出推荐的搜索项和搜索结果 ( 有时会将缩略图列出来），包括应用、联系人、音乐、视频、邮件、消息、日历、备
    忘录、提醒等分类。
</blockquote>
<blockquote align="center">
    <font color="#FFFFFF">•*. &gt;:</font> <font color="#FFFFFF">為</font> <font color="#FFFFFF">r&amp;T
    v</font><font size="2"><font color="#FFFFFF">inst|</font></font>
</blockquote>
<blockquote>
    <font size="1"><font color="#FFFFFF">APFUCATiONS</font></font>
</blockquote>
<blockquote>
    <font size="2"><font color="#FFFFFF">Instagram</font></font>
</blockquote>
<blockquote>
    <font size="2"><font color="#FFFFFF">MUSIC ;</font></font>
</blockquote>
<p><font size="2"><i><font color="#FFFFFF">Grow</font></i></font> <font
        size="2"><font color="#FFFFFF">Old With Me Instant Crush (feat. Julian C.</font></font></p>

<blockquote>
    <i><font color="#FFFFFF">.t</font></i> <i><font color="#FFFFFF">，</font></i>
</blockquote>
<blockquote align="center">
    <font size="2"><font color="#FFFFFF">QWERTYU I OP</font></font><font size="2"><font color="#FFFFFF">ASDFGHJKL</font></font><font
        size="2"><font color="#FFFFFF">♦ ZXCVBNM</font></font> <font size="2"><i><font
        color="#FFFFFF">43</font></i></font>
</blockquote>
<p><font size="1"><font color="#FFFFFF">123</font></font> <font size="2"><i><font
        color="#FFFFFF">Q</font></i></font></p>

<p><font size="2"><font color="#FFFFFF">space</font></font></p>

<p><font size="2"><font color="#FFFFFF">Search</font></font></p>

<p><font size="2">图</font> 19-34 iOS <font size="2">的</font> <font
        size="4">Spotlight</font> <font size="2">搜索功能使用了语音搜索、自动推荐、分类推荐等方式。</font>
</p>

<p>排序和筛选</p>

<p>在移动设备上，排序和筛选有的时候是一回事。屏幕尺寸有限，手机又都在时刻移动，人
    们通常不会有太多的时间一页又一页地翻动搜索结果。因此，有效的排序可以将不需要的结果 筛选掉，或置于搜索结果的最下方。另外，很多用户并不清楚排序和筛选的区别，所以我们可
    以综合考虑这些因素，设计出更加适合移动设备的策略：干脆将排序和筛选结合起来，变成一</p>

<p align="right" height="1em" width="0pt">449<br/>
    <br/></p>

<p>About Face 4 :交互设计精髓</p>

<p>组控件。不过，遗憾的是，很多主流应用在这方面做得并不如意。</p>

<p><img align="baseline" alt="" height="331" src="../Images/Image00182.jpg"
        width="189"/></p>

<p><img align="baseline" alt="" height="37" src="../Images/Image00049.jpg"
        width="57"/></p>

<p><img align="baseline" alt="" height="53" src="../Images/Image00138.jpg"
        width="44"/></p>

<p>亚马逊在 iPhone
    上的应用，如图 19-35 所示，提供了一个直接搜索的位置，能够记住最近
    的搜索，而在搜索结果的导航栏上的 Refine ( 细选）键看起来也不错。不过，这个令人恼火的
    细选 UI 需要用户先选择部门，然后才能看到排序条件（或者其他筛选条件)，并且在用户还没
    有选择这些条件前，界面就自动回到了搜索结果页！结果它实际用起来很糟糕，用户甚至都不 知道还能排序和筛选！</p>

<p><br/>
    <br/></p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="center" height="0pt" width="0pt"><font size="1">AUT</font>
                <font size="2">，</font> <font size="2">，:鴆</font> <font size="1">AM •</font>
                <font size="2">臂</font> <font size="1">！！》_■•</font></p>

            <p><font size="1">&lt;
                Search</font></p>

            <blockquote>
                <font size="1"><i>Book%</i></font>

            </blockquote>
            <blockquote>
                <font size="1">&nbsp;</font> <font size="1">1.
                AlKMit Fac*: Th« EsseotuUs ••‘ of mt«ract&gt;oo</font> <font size="1">g</font> <font
                    size="2">变菜</font> <font
                    size="1">g Cooptr (P»p##b*cii)</font>

            </blockquote>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <blockquote>
                <font size="1">•wr</font> <font size="2">，</font> <font size="1">AUT</font> <font
                    size="2">，</font> <font size="1">•</font>
                <font size="2">彳看鼸</font> <font size="1">HOB</font>
            </blockquote>

            <blockquote>
                <font size="1">&lt; Back Rofino Sort R«suKs</font>
            </blockquote>

            <p><font size="1">Sort by
                v</font></p>

            <p><font size="1">IMw«nc«</font></p>

            <p><font size="1">&nbsp;</font>
                <font size="1">FMM Results</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <blockquote>
                <font size="1">2. AtxMitFac* 3:Th«</font>

            </blockquote>
            <blockquote>
                <font size="1">Roten ReMivinn (Paporb4K：M S29.1B</font>

            </blockquote>
            <p align="center" height="3pt" width="0pt"><font size="1">&nbsp;</font> <font
                    size="1">cm</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="center" height="0pt" width="0pt"><font size="1">&nbsp;</font> <font
                    size="1">Clear AM Refinements Amazon Prime ^</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">3. About Fac« TheOdyseey
                WWI of an Am*rtc«n Warnr</font></p>

            <blockquote>
                <font size="1">CoAoivi Oavid H. Hadnwofi S17M</font>

            </blockquote>
            <blockquote>
                &nbsp; <font size="1">906_»‘UMdlr</font> <font size="2">〇</font>
                <font size="1">mia</font> <font size="2">〇</font> <font size="1">1</font>

            </blockquote>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="center" height="0pt" width="0pt"><font size="1">(471»</font>
            </p>

            <p><font size="1">Department
                v</font></p>

            <p><font size="1">AeAft</font></p>

            <p><font size="1">&nbsp;</font>
                <font size="1">Avg. Cuflomer Review ^</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <blockquote>
                <font size="1">&nbsp;</font> <font size="1">4.ILov«Vbu.$tinhyFae«
                Cyd Moore (Pepeibeck)</font>

            </blockquote>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font>
                <font size="1">New Releases v Formal v</font></p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp; n Q
                v <font size="1">^ —</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <blockquote>
                <font size="1">&nbsp;</font> <font size="1">rr
                Q</font>
            </blockquote>
        </td>
    </tr>
</table>

<p><br/>
    <br/></p>

<p align="center" height="0pt" width="0pt"><font size="1">■about fac© 4*</font></p>

<p align="center" height="0pt" width="0pt">0 <font size="2">〇</font> _</p>

<p>I. About Fac®. Th® lnt«mction
    Ckwwg«</p>

<p><i>Man</i> <font size="1">Cooper
    fPapefbac^}</font></p>

<blockquote>
    <font size="1"><i>2.</i></font> About Fac« 3:
    Tfw Essontiaift <font size="2">〇</font> lli?t*racti... <font size="1">Rob«n FWismn iPap^rt&gt;acl〇</font>
    $2916
</blockquote>
<blockquote>
    9C &amp;U^edff <font size="1">〇</font> rn$r <font size="1">；</font> ft <font size="1">〇</font>
</blockquote>
<blockquote>
    X Ab <font size="2">〇</font>
    utFac«(A J C <font size="2">〇</font>
    nim»t«fio Quido Brvmtti Oocvia
</blockquote>
<blockquote>
    <font size="1">灞*I72»</font>
</blockquote>
<blockquote>
    <font size="1">4.1</font> Lov« Vchi, 8t»Ay
    Fac« <font size="1">CydMoor»(Pt(Mrt»cK)</font> ■ iKfTV S344
</blockquote>
<blockquote>
    ^ 4 U»«d $0 ai
</blockquote>
<blockquote>
    ft Q \af V
</blockquote>
<blockquote>
    <font size="2">图</font> 19-35 <font
        size="2">亚马逊在</font> iPhone
    <font size="2">上的应用的搜索、排序和筛选界面是失败的。用户如果想精选结果，首先要先选择部门，然
        后才能看到排序和筛选条件。这显然是为了迁就后台数据库的集成问题而造成的。但恼火的是亚马逊的用户。</font>
</blockquote>
<p>图 19-36
    所示的 OpenTable 应用，设计巧妙、使用方便。界面上的搜索部分，直接集成了
    预定餐厅所需的筛选条件 .• 时间、地点、餐厅名称的关键字等。时间和地点可自动弹出供用户
    选择。缩小搜索范围的操作也清晰简单，最重要的标准会显示在上面，最挑剔的标准会收缩在 下面。 OpenTable 上唯一糟糕的地方是筛选控件，它被隐藏在了屏幕右下方的一个阴暗的角落 里，有些用户肯定不会注意到它的存在。</p>

<p>Yelp 软件做得不错，在搜索栏左侧有一个很突出的缩小选择（
    Refme) 范围的按钮，如图 19-37 所示。轻拍这个按钮会弹出一个全屏对话框，里面是筛选和排序条件，每个条件都有清
    晰的标签，并按照重要性从上到下排列出来。</p>

<p>Yelp 和亚马逊这两个应用，在同一个细节上做得很好：搜索结果视图的顶端，有一个窄窄
    的筛选栏。这个筛选栏包含了当前结果所用过滤器的精炼的文本描述。这两个应用还有一点 做得也很不错，横向扫动屏幕可以看到完整的活动筛选条件列表（ Yelp 中的这个列表没有显
    示完整）。此外，轻拍筛选条件就可以打开或关闭它，无须返回 “ 缩小选择 ” 界面，这一点也 值得称赞。</p>

<p>450</p>

<p><img align="baseline" alt="" height="121" src="../Images/Image00090.jpg"
        width="115"/></p>

<p><img align="baseline" alt="" height="142" src="../Images/Image00353.jpg"
        width="234"/></p>

<p><img align="baseline" alt="" height="98" src="../Images/Image00270.jpg"
        width="313"/></p>

<p><img align="baseline" alt="" height="116" src="../Images/Image00089.jpg"
        width="316"/></p>

<p>第 19 章为移动设备和其他设备而设计</p>

<p>Cancel Search</p>

<p>(SJ Table for 2. today at 12:00
    PM</p>

<p><font size="2">珍</font> <font size="1">Newburyport</font></p>

<p height="2em" width="0pt"><font size="5">I</font></p>

<p><font size="1">9 AM C -f</font></p>

<p><font size="1">or 2 to&lt;iay</font></p>

<p><font size="1">Cancel Refine</font></p>

<p>■</p>

<p><font size="1">Not Your Average Joo*s...</font>
</p>

<p>Oor^empd^v <font
        size="6"><i>^rvmKa^</i></font></p>

<p>I GSS9</p>

<p>Ti Sort by</p>

<p align="right" height="0pt" width="0pt">H^^^^j^Jphabtfticai | Rating
    ]</p>

<p><i>\mmmmtm</i></p>

<p>QWERTYU I OP ASDFGHJKL Z X C V B N M
    gj</p>

<p>OE9B9 <u>麻爾麵</u>
    qqqi</p>

<blockquote>
    10 Cantor Street
</blockquote>
<p><font size="1">Distance m</font> 〇</p>

<p><u>|</u> <i><u>026</u></i> <u>| i [ &amp;</u> Price</p>

<p>mm 0^29 CBZ3 CSBB9</p>

<p>®</p>

<p>¥</p>

<p><font size="2"><i>^</i></font> <font
        size="4">Special Offers [all)</font> <font size="2"><i>C</i></font> Categories atfi a</p>

<p><font size="2">图</font> <font size="2">19-36 OpenTable</font> <font size="2">应用的搜索界面（左图）和筛选界面（右图）做得不错</font>
    <font size="2">.</font> <font size="2">但筛选控件的位置不太好（中图），它
        在屏幕的右下角，比较小，而且滚屏后就看不见了（虽然向上滚屏它又回来了）。</font></p>

<p>$SS, Full Bar, Takes
    Reservations</p>

<p>.Dali Restaurant &amp; Tapas
    <font size="2">Bar</font></p>

<p>□ □□□. 1716Revmwn <font
        size="1">415 Washington Si. Somerville</font> Tapas Bars.
    Spanish. Basque</p>

<p align="right" height="0pt" width="0pt"><font size="1">5.3 mi S$S</font></p>

<p>■H11</p>

<p>■ E</p>

<p>^ <i>^</i>
    ：</p>

<p><font size="7">關</font></p>

<ol height="0pt" width="0pt">
    <li align="left" height="0pt" value="2" width="0pt"><font size="1">Tabema De
        Haro</font> <font size="1">OQQCJ Li 176 Reviews 999 Beacon St. Brookline</font>
    </li>
</ol>

<p><font size="1">Tapaft Bars</font></p>

<div height="3pt"></div>

<ol width="0pt">
    <li align="left" height="0pt" value="3" width="0pt"><font size="1">Tapeo Restaurant &amp;
        Tapas Bar</font></li>
</ol>

<p><font size="1">O O O Ci ill 543 Ftevi^wa 266 Newbury St,
    Back Bay Tapas Bars. Spanish. Basque Q Online Reservations</font> <font size="1">4.7</font> <i>mi</i></p>

<blockquote>
    <i>s$s</i>
</blockquote>

<p align="right" height="0pt" width="0pt">5,9 mi</p>

<p align="right" height="0pt" width="0pt"><i>s$s</i></p>

<p>Most Popular</p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp; <font size="1">Open Now</font> <font size="1">i：39
                am</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p align="right" height="0pt" width="0pt">&nbsp; 細
            </p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font
                    size="1">Hot &amp; New</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font
                    size="1">Offering a Deal</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p>&nbsp;&nbsp;</p>
        </td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p><font size="1">&nbsp;</font> <font
                    size="1">Delivery</font></p>
        </td>

        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span>

            <p height="0pt" width="0pt"><font size="5">(SSH&nbsp;</font></p>
        </td>
    </tr>
</table>

<p><br/>
    <br/></p>

<p><font size="1">4. Barcelona Wine
    Bar</font> <font size="2">□ OQQC.</font></p>

<p><font size="1">1700 Beacon St E</font></p>

<p>Tcipa^^SmaH Piate;</p>

<blockquote>
    <i>}</i> <font size="1">302 Reviews St Brookline</font>
</blockquote>
<blockquote>
    J intes
</blockquote>
<p align="right" height="1em" width="0pt">Q ： Q^ 0</p>

<p>NtMtrby Search <font
        size="6"><i>Aboux</i></font> M«
</p>

<p align="right" height="0pt" width="0pt"><font size="1">3.1 m» $$$</font></p>

<blockquote>
    <font size="2">Distance</font>
</blockquote>

<blockquote>
    <font size="1">Auto</font>
</blockquote>

<blockquote>
    <font size="1">Sort by</font> <font size="1">Best Match</font>
</blockquote>

<blockquote>
    <font size="1">General Features</font> <font size="1">Full
    Bar</font>
</blockquote>

<p><font size="2">图</font> <font size="2">19-37 Yelp</font> <font size="2">应用的搜索和筛选界面设计得不错。筛选条件按钮位于搜索结果页面的左上方，按纽上的标签很清楚（左
    图），轻拍一下，会弹出一个筛选和排序的模态对话框（右图）。搜索结果页面会出现一个窄窄的筛选栏，上面清晰的 显示出有哪些筛选条件被用上了</font> <font size="2">=</font></p>

<p>451</p>

<p><span id="filepos0002403638"></span></p>

<p>欢迎和帮助界面</p>

<p>尽管大多数移动应用都易于使用，但移动设计存在着一些固有的制约因素，它们影响着用
    户学习和掌握的快慢。我们必须要考虑的这些制约因素是：</p>

<p>• 有限的屏幕尺寸制约了屏幕上文本标签和文本向导的数量，这个问题始终存在。
</p>

<p>• 在多点触屏上，手势是完成操作的主要手段，用户在实际操作前（如轻点或滑动等），
    通常不知道会发生什么，屏幕上的控件通常不具备能供性提示（ affordance )。
</p>

<p>• 与桌面应用不同，触屏无法使用鼠标悬停，因此无法运用悬停调出提示或其他帮助
    信息。</p>

<p>上述制约因素，对用户学习移动应用有着很大的影响，可通过欢迎界面和帮助界面帮助用 户学习。
</p>

<p>欢迎界面和帮助界面，一般来说是移动应用这枚 “
    硬币 ” 的两面。当用户第一次打开某个
    应用时，首先映入眼帘的是欢迎（ welcome) 界面，它会将该应用的主要用途以及如何操作告
    诉用户。帮助界面（ help), 基本上也提供着类似的信息，甚至是完全相同的信息，但它必须是 “ 有求必应的 ”—— 即用户想看到它时，它就该出现。大多数的应用不太复杂，因此也无须将这
    两个界面分开。但创作类应用通常都很复杂，充斥着大量的控件、选项、动作等，欢迎和帮助 这两个界面应该同时具备。</p>

<p>本节介绍几种常见的欢迎和帮助的习惯用法，用户可以从中学习并掌握主要的手势用法和
    交互方式。关于此话题的更多讨论，请参考本书的第 16 章。</p>

<p>导览</p>

<p><img align="baseline" alt="" height="67" src="../Images/Image00305.jpg"
        width="54"/></p>

<p>导览（ guidedtour) ，一般来说，由一系列的带有文本和图片的卡片轮显组成。这些卡片描
    述了应用的主要功能和操作方法等。导览一般在首次使用时被激活，或者是应用有重大版本升 级后被调出并展现新版本的新功能和变化等。当然，导览也是一种帮助的形式。很多应用中，
    用户可以在任意时间，在应用的设置对话框中，或顶端导航栏上的帮助按钮或帮助菜单中，调 出导览。用户在浏览导览时，应该被允许在任意卡片或页面的位置退出。</p>

<p>设计原则</p>

<p>让导览引导首次使用的用户 <font
        size="6">。i</font> 覆盖层</p>

<p>覆盖层（ overlay) 是另一种简单的帮助手段，可以迅速地帮助用户把软件用起来。覆盖层 , 第 19 章为移动设备和其他设备而设计</p>

<p>本身是半透明的，顾名思义，它将屏幕覆盖住，并在上面显示出提示和帮助，通常用手写的字
    体显示，并加上一些箭头，指向具体的控件，或标出该使用何种手势等。轻拍屏幕上的任意位 置就会消除该覆盖层。（有时是点击 “ 关闭 ” 框消除覆盖层。）和导览一样，覆盖层也可以随时
    从帮助按钮或设置菜单中调用。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p><img align="baseline" alt="" height="68" src="../Images/Image00243.jpg"
        width="55"/></p>

<p>设计原则</p>

<p align="right" height="8pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    用覆盖层展示手势的用法。</p>

<p><br/>
    <br/></p>

<p>工具提示覆盖层</p>

<p>工具提示覆盖层 （tooltip
    overlay) 是覆盖层的一个变体，它在一个覆盖层界面上显示出当 前页面上全部的主要功能，通常被用在复杂的创作类软件中。基于这个原因，该习惯用法最好
    不要用在欢迎界面上，但可以用在帮助界面上。</p>

<p><span id="filepos0002409958"></span></p>

<p><font size="6">多点触摸手势</font></p>

<p>手势是移动体验的核心。虽然这类手势体验的种类是十分丰富的，而且是十分拟真的，但
    主要的手势只有几个，也是最好的几个。用户的手势词汇量无须太多，满足日常使用即可，这 是我们设计的原则。我们要做到让手势尽可能简单和直接，这样用户才能快速理解和掌握。</p>

<p>本节将介绍多点触屏上最常用手势及主要用法。</p>

<p><span id="filepos0002410651"></span></p>

<p>轻拍选择、激活或开关</p>

<p>轻拍可以选择、激活控件的状态。被轻拍的物体，应该适当展示出被选择的高亮状态，或
    被激活的状态或动画状态等。</p>

<p><span id="filepos0002411014"></span></p>

<p>轻拍保持</p>

<p>轻拍保持（ tap-and-hold), 这种手势已经开始不太流行了，其实不流行也好。它通常被用
    来打开对象上的情境菜单，类似于桌面上的点击鼠标右键。其缺点是，这个手势不太容易被用 户摸索出来，很少有人习惯于使用它。因此，我们不推荐使用这种手势。</p>

<p align="right" height="4em" width="0pt">453</p>

<p><span id="filepos0002411737"></span></p>

<p>拖滚</p>

<p>拖滚 （drag to
    scroll) ，水平或垂直均可，是一个基本的直接操作手势。</p>

<p>垂直拖动可以用来滚动列表，或者配合拖动控制柄实现列表重新排序。如果列表已经被滚
    到最上端，则向下拖动并释放可以刷新该列表。向上拖动列表，则列表继续向上滚动，显示更 多的列表项目。</p>

<p>有些移动系统上，在顶端或底端垂直拖动一下，会调出顶端抽屉或底端抽屉。</p>

<p>水平拖动则可以滚动轮显或泳道，或者打开左侧或右侧的抽屉。</p>

<p><span id="filepos0002412754"></span></p>

<p>拖移</p>

<p>拖移 （drag to
    move) 还可以被用来移动或复制对象，可将对象从一个列表、窗格或任何容 器中，移动或复制到另一个容器中，也可以在一个画布内或网格内移动或复制对象。
</p>

<p><span id="filepos0002413226"></span></p>

<p>拖动控制</p>

<p>拖动还可以控制旋钮、滑块、虚拟的 x-y 型操控板，以及各式情境触控物，也可以用来在 画布上操作工具板上的东西（例如绘画应用中的画笔）。</p>

<p><span id="filepos0002413670"></span></p>

<p>向上/下滑动</p>

<p>向上滑动和向上拖动基本上是同义词。不过， iOS
    在桌面编辑模式中，向上滑动手势意味 着关闭一个正在运行的应用。向上滑动列表或网格，会导致列表或网格向上滚动数秒，并伴随 着模拟的运动效果显示。</p>

<p>向下滑动和向下拖动基本上是同义词。同样，向下滑动列表或网格，会导致列表或网格向
    下滚动数秒，并伴随着模拟的运动效果显示。</p>

<p>向左;骨动 <font
        size="4">_</font></p>

<p>向左滑动和向左拖动基本上是同义词。向左滑动轮显或泳道时，会导致轮显或泳道向左滚
    动数秒，并伴随着模拟的运动效果显示。</p>

<p align="right" height="0pt" width="0pt">第 19
    章为移动设备和其他设备而设计</p>

<p>向左滑动有时也被用来打开右侧的抽屉，或关闭左侧的抽屉。</p>

<p>苹果的 Safari
    浏览器用向左滑动的手势来执行 “ 前进
    ” 导航。谷歌的 Chrome
    浏览器在标 签编辑模式下，向左滑动意味着删除该标签。</p>

<p><span id="filepos0002415773"></span></p>

<p>向右滑动</p>

<p>向右滑动和向右拖动基本上是同义词。向右滑动轮显或泳道时，会导致轮显或泳道向右滚
    动数秒，并伴随着模拟的运动效果显示。</p>

<p>向右滑动有时也被用来打开左侧的抽屉，或关闭右侧的抽屉。</p>

<p>苹果的 Safari
    浏览器用向右滑动的手势来执行 “ 回退
    ” 导航。谷歌的 Chrome
    浏览器在标 签编辑模式下，向右滑动也意味着删除该标签。</p>

<p><span id="filepos0002416798"></span></p>

<p>双指张合</p>

<p>双指合拢（ pinch-in)
    手势被用来缩小对象的物理视图（例如地图中的缩小操作可以看到更 大范围的地图）。我们也可以运用它来执行 “ 语义式 ” 的缩小，即在物理或虚拟的层级结构中退 到上一级中。</p>

<p>双指张开（ pinch-out) 手势被用来放大对象的物理视图（例如地图中的放大操作可以看到
    更小范围的细节）。我们也可以运用它来执行 “ 语义式 ” 的放大，即在物理或虚拟的层级结构中 进入到下一级中。</p>

<p><span id="filepos0002417974"></span></p>

<p>旋转</p>

<p>旋转（ rotate)
    是用拇指和食指顺时针或逆时针在触屏上旋转的手势。这个手势可以用来操 作旋钮控件，不过旋钮控件也可以用水平或垂直拖动来操作，或者其他易于被用户摸索出来的
    手势等。旋转手势还可用来旋转物体，例如图像编辑软件中的被选择的像素对象等。</p>

<p>从人机工学上来看，这个扭动的手势，做起来不太方便。 FiftyThree 公司的 iOS
    应用 Paper, 运用旋转手势来控制
    “ 撤销 / 重做 ” （ imdo/redo) 。这是个创新的用法，不过从可用性角度讲似乎 传统的 “ 撤销 / 重做 ” 箭头图标更好用一些。</p>

<blockquote>
    455
</blockquote>
<p><span id="filepos0002419999"></span></p>

<p>多指滑动</p>

<p>很多移动 OS
    都支持多指滑动。例如 iOS 可以选择用四指滑屏来切换正在运行的应用。
</p>

<p>总体来说，多指滑动不太容易被用户摸索出来，而且如果在应用中使用，很有可能会
    和操作系统级的手势相互干扰。因此最好不要用多指滑动，或者将它们备用，以应对特殊 需求。</p>

<p><span id="filepos0002420740"></span></p>

<p><font size="6">应用间集成</font></p>

<p>现代智能手机中的应用都是独立运行的，这给用户带来了极大的方便，创造了非常好的生
    态系统体验，用户可以根据自己的需求，从应用商店里为手机添加和购置各种应用。不过应用 独立运行的这种方式，有一个软肋 _• 应用之间的协作和数据交换变得比较困难。例如 ，iPhone
    上有电话、联系人、日历、消息、备忘录、提醒等诸多应用，但这些应用都是相互独立的，它
    们之间几乎没有什么联系。</p>

<p>不过，最近 iPhone
    和其他各种智能手机，开始进行应用间集成工作，例如将电话应用和联 系人应用集成起来。当有来电时，我们可以在手机上看到联系人的名字。我们想打电话时，从
    联系人列表中找到那个人，轻拍就可以直接拨号了。但我们认为，这种集成，还可以再进一步， 例如，轻拍某个联系人，就可以将和此人有关的所有文档按时间先后顺序列出来：约会信息、
    电子邮件、通话记录、备忘录、和此人有关的网页网站，等等。</p>

<p>同样，当有来电时，手机可以自动检查你所在的场所（例如电影院），或者刚好你正在参加
    手机日历上计划好的一个会议，这时手机便自动静音（甚至还可以发送一条 “ 我在忙，稍后给
    您回电。 ” 的短消息给来电者），除非来电者是你 VIP 列表中的人。</p>

<p>遗憾的是，目前的手机制造商还没有走到将手机的核心应用集成起来这一步。不过，有些
    聪明的应用，例如 IFTTT 应用 （If
        This Then That) 可将加入到其服务系统里的应用连接起来， 用户可以定制规则，来进行一定级别的集成（如图 19-38 所示)。</p>

<p>在音乐制作领域 ，Audiobus
    ( 如图 19-39 所示）是一个 “ 基于集成 ” 的 iOS 应用，它可以</p>

<p>将一些兼容的 iOS
    音频软件的音频输出作为另一些兼容应用的音频输入。它的效果非常好，实 际上把 iPhone 或 iPad 变成了一个完整的虚拟录音棚。</p>

<p>456</p>

<p align="right" height="0pt" width="0pt">第 19
    章为移动设备和其他设备而设计</p>

<p><br/></p>

<table valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span> &nbsp;

            <blockquote>
                <font size="2">•ooo〇AT&amp;T ^</font>
            </blockquote>

            <p align="right" height="0pt" width="0pt"><font size="2">1:49 AM l 彳术 81%
                ■_</font></p>

            <p height="0pt" width="0pt"><font size="5">X</font></p>

            <blockquote>
                Browse
            </blockquote>

            <p height="0pt" width="0pt"><font size="5">Q</font></p>

            <blockquote>
                Q □
            </blockquote>

            <p><font size="2">RSS &gt;
                Twitter</font></p>

            <p><font size="2">by demoine</font>
            </p>

            <p><font size="2">矗30k 華314</font></p>

            <blockquote>
                M <font size="5">釋</font>
            </blockquote>

            <p><font size="2">Star a Gmail, send it to
                Evernote</font></p>

            <p><font size="2">by alexandor</font>
            </p>

            <p><font size="2">A 30k 螫510</font>
            </p>

            <blockquote>
                <font size="2">Post your Instagram ^ pictures as native USJ Twitter
                    pictures</font>
            </blockquote>

            <blockquote>
                <font size="2">by djuiceman</font>
            </blockquote>

            <p><font size="2">A 27k 擊</font> <font
                    size="2">1.4k</font></p>

            <p><font size="2">Save Facebook photos you're
                tagged in to iOS Photos</font></p>

            <p><font size="2">by devm</font></p>

            <p><font size="2">A 27k _858</font>
            </p>
            <blockquote>
                <font size="2">Mark Watch Later on YouTube and save it to Pocket!</font>
            </blockquote>

            <p><font size="2">by pocket</font></p>

            <p><font size="2"><i>I</i></font> <font size="2">26k 罾829</font>
            </p></td>

        <td bgcolor="#FFF" colspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" colspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>
</table>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> 19-38 IFTTT
    <font size="2">应用可以让用户将应用连接起来，自定义一些输入和输出的触发条件，简单而有效地把应用集成起来。</font>
</blockquote>
<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00319.jpg"/></p>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> 19-39
    Audiobus <font size="2">软件可以让用户把不同的音频应用</font> “ <font size="2">链接</font> ” <font size="2">在一起</font> . <font
        size="2">这种</font> “ <font size="2">链接</font> ” <font size="2">可以是输入、输出、音效，把</font> iPad <font size="2">变成了一个完整的虚拟录音棚</font>
    <font
            size="4">9</font>
</blockquote>
<blockquote>
    457
</blockquote>
</blockquote>
</body>
</html>
